Designing for Visual Accessibility: Colour Blindness

As part of our “inclusivity and accessibility” initiative, we aim to showcase the importance of creating digital products and websites that are designed for all. From this, we hope to encourage that they can be entirely understood, navigated and perceived by everyone.

In the UK, there are 11 million people who are registered as disabled, 9% of people have some form of colour blindness and people over 60 now account for over 20% of the population. Ensuring your website is useable by these groups isn’t just an ethical choice anymore, it makes good business sense.

The first perspective we’d like to feature in this context is colour blindness and accessibility for those with visual impairments. For this, we had a chat with Sarah Key, Digital Communications Manager at NHS.

Sarah has worked in marketing, communications and PR for charities including Action for Children and Royal Voluntary Service as well as public sector organisations like Avon and Somerset Constabulary. She currently works for NHS Bristol and shares her knowledge with commercial businesses and charities as a freelance Consultant.

She has a special interest in accessibility.

ADLIB: Could you share your take, why does web inclusivity and accessibility matter and do you have some stats to set the scene?

Sarah Key: I feel it’s our obligation as web designers to be considerate of all online users. Our websites, apps and online content are often the first – and sometimes only – impression that the outside world gets of our organisations. It’s only fair that we make an effort to make our online spaces welcoming and inclusive for all. Colour blindness can affect up to 1 in 12 men in varying degrees; many are surprised by how common, yet under-considered, it is.

Accessibility issues can take many forms – from a permanent condition, like colour blindness, to a temporary one, such as holding a child or otherwise having your hands full and having to use your device one handed – so it really makes business sense to consider it from all angles.

ADLIB: Can you share the main pitfalls specifically for visual accessibility and inclusivity?

Sarah Key: Common mistakes are –

• Using colour as the only way to provide information. Traffic light colours for showing status or retail sites that show an unlabelled thumbnail of colour is the worst offenders for this! Use patterns, labels or icons to offer a second way to identify key things. This way, no matter what someone’s colour vision is like, they’ll still be able to understand the information.
• Not considering contrast. If you absolutely have to use red and green together, make one dark and one light to help with clarity. Again, this will hopefully help with general legibility but should also benefit those with visual issues.
• Using colour combinations that don’t work well for colour blindness. A tweak to make green more like turquoise, and red more like pink, may make your image, post or infographic more likely to be accessible.

ADLIB: For those that are working on a new app or website, could you share some top tips to ensure that visual accessibility and inclusivity is baked into all considerations during the entire process, from wireframing to design to dev work?

Sarah Key: For my projects, it’s worked best when we’ve considered accessibility from the start. While wireframing, we’ll check the contrast and use of colour while we develop the chosen aesthetic. We’ll then check accessibility during the build to ensure that content works for screen readers. The project is thoroughly user tested with those that have accessibility considerations and regularly checked and developed to make sure it’s easy to use by all.

ADLIB: Can you share some specific considerations for social media that you think everyone should take into account in the context of colour blindness?

Sarah Key: I’d really recommend testing your design work using Photoshop’s inbuilt colour blindness display setting and your social media content with browser filters or device apps.

There’s a range available to cover all browsers and device operating systems. Colour blindness is a spectrum – indeed, everyone sees colour differently – but these tools give an indication of how things could look to someone with a colour vision deficiency.

ADLIB: How can web designers ensure that they always have “inclusivity and accessibility” at the forefront of their minds?

Sarah Key: Get into the habit of considering accessibility whenever you get to work. Find a routine that works for you; I personally find that checking in with accessibility criteria from the start of a project works for me. Others might prefer accessibility “sprints” or cycles of work or getting help from colleagues or external experts at various stages of a project. Nothing beats user testing to add context and bring home how accessible, or inaccessible, your online project is!

Designing for inclusivity aims to tackle the following barriers: quality of hardware, software, internet connectivity, computer skills, economic situation, education, geographic location, language, age and disability.

Thanks so much for sharing, Sarah!

www.sarahkey.co.uk