Designing & Testing Websites for Color Blindness Accessibility

Designing websites, apps, and digital experiences should be approached like designing a new building – they should be as accessible to as many people as possible. Most new buildings come equipped with ramps for wheelchairs, a great deal of signage is now enhanced with braille for the visually impaired, and plenty of ATMs come equipped with headphone jacks to give people audio guidance when withdrawing their money.

Whilst we may be making some progress to create a more accessible real world, it’s sad to say that the digital world still has a long way to go. It is shocking to learn that 70% of all website are actually breaking the law on accessibility.

This article focuses on the accessibility issues surrounding color blindness, a visual impairment that affects 8% of men and 0.5% of women worldwide, and gives some tried and tested tips to help you to make your website more accessible to those with color blindness.

What is color blindness and how are people affected?

In short, color blindness is where people have a deficiency or anomaly concerning one or more of the eye’s three retinal photoreceptor cones that help us to see color. Effects can range from people being unable to distinguish between certain colors, such as red and green, being unable to detect a certain color completely, and for some, they can see no color at all so see the world in grayscale.

• Deutronomia – green deficiency is the most common, affecting around 5% of males.
• Protanopia – red deficiency is less common, affecting around 2.5% of males.
• Tritanopia – blue deficiency is extremely rale, affecting only 0.5% of males.

If you are interested in the details of color blindness, and to see more example, visit Colorblindawareness

What can we do about it?

When designing and testing your app or website, there are a few helpful points to keep in mind.

Use high contrasting colors – Colors that are on opposite ends of the color spectrum work well to ensure high contrast. For instance, black text on a white background is more accessible than using  light gray text on a white background. However, it is also worth keeping in mind that too much contrast, such as pure black text on pure white, can have a negative effect on people with dyslexia, so try considering a cream background for the black text.

Don’t rely on color alone to convey important messages – It is always a good idea to use color and a shape to portray meaning, especially in user interface designs or data visualisation. For example, a green dot to signify “OK”, or a red dot mean “Error” might both become lost. It is much safer to have a green dot with a tick, and a red dot with a cross, instead of the colored dots alone. Always ask yourself “If I take away the color, will this still make sense?”, because shapes can have meaning, with or without color.

Likewise, if you have charts or data visualisations, it is always a good idea to include a pattern along with a color to help ensure clarity. For example, a bar chart with many colors might become difficult to discern, so including a slight chevron or stripe pattern to differentiate similar color bars is a great idea.

Use tools to test your designs – If you follow the tips mentioned above, your designs will have more chance of being color blind accessible, but it is always good to acid test to be sure. I use Colororacle, a very handy tool that simulates what it is like to be color blind by letting you see instantly areas of your design that will cause difficulty for people who are color blind.

Another testing good technique is to take a screengrab of your design and simply apply a slight blur to it in Photoshop. Not only will this show if you are relying too heavily on your color areas, but it is a great litmus test to see if your design hierarchy and overall structure still works and makes sense,even though you’ve lost the focus and detail of the page.

As an additional consideration, you may want to add a voice search tool to your website which will be useful to people with a wide range of visual (and dexterity) impairments.

Conclusion

By creating an accessible website, you not only provide a more egalitarian experience for your visitors, but Google ranks websites with accessibility techniques included in metadata, content and visual design, much better in organic search – which means you’ll appear higher up in the search ranking.