Even if you are committed to following accessibility best practice guidelines, there will be times when those rules, depending on the context and user’s needs, will conflict.

The key here is empathy, common sense, and (most importantly) testing. My advice would be to follow those guidelines, but not to be afraid of investigating individual applications and asking whether they are best.

Getting a 100% mark on accessibility audits for web development is certainly something to aim for. But it’s important to bear in mind that your website can pass with no errors but still be confusing for the users (whether disabled or not).

  1. Think about colour

    One of the most basic concepts to always keep in mind when designing or developing is colour contrast. The colours you choose in your designs, particularly between text, foreground and background elements, should have sufficient contrast ratio of 4.5:1. Doing so allows you to create the most accessible designs possible for everyone, especially those with visual impairments.

    Examples of good and bad colour contrast, with hard to read text on the left and easy to read text on the right.

    As a designer or developer, you may think that sticking to colours which pass a contrast check means you are restricted from creating bold, beautiful designs. I say that’s not true. Good design is all about working with constraints, and problem-solving to achieve a functioning end product. It’s perfectly possible to create stunning designs that are also accessible. Just look at any Apple product.

    For a more detailed explanation about the role of colour contrast within accessibility, you can read this article from the UK government’s accessibility blog.

    Web Content Accessibility Guidelines (WCAG) state you should aim for a minimum ratio of 4.5:1 between foreground and background elements, and a 3:1 contrast between link text colour and surrounding non-link text colour.

    There are many tools that can be used to calculate this and one that I often recommend is the free Paciello Group colour contrast analyser.

    However my tool of choice for Mac users is the brilliant Contrast App available on the Mac App Store.

  2. Ask yourself 'could anyone get confused?'

    This is one of the many overlaps between accessibility and the field of User Experience (UX) design. Some people would argue that they are the same thing. Your users include people of all abilities, so you can’t be the best UX designer without considering accessibility at the same time.

    When evaluating your designs, ask yourself if there are elements which, although may make sense to you, could be less clear for someone else. A perfect example of this is the type of content you use for buttons. It’s tempting as a designer to go for the simplest, neatest solution, like simple icons, but this can actually over-complicate an interface for many users.

    Two mobile screen interfaces, one with just icons, and one with icons and labels.
    Which of these 2 interfaces do you think is easier to understand?


  3. Test everything. Then test again.

    While automated testing tools are helpful, they are no substitute for properly stress-testing your designs with real-life users. And that should include people who have different abilities and access requirements to yourself. Automated accessibility audits typically only pick up on automatic WCAG errors, but cannot test for other things such as a confusing navigation menu.

    Real users can tell you about their lived experience and help you better understand how to improve your designs in the future. It’s not always the cheapest or easiest process to implement, but in the meantime, just make sure that you’re trying to think how someone in a different situation may approach your product.