3 Tips for Designing Better Websites for Colorblind Users
The reality of a web accessible by everyone is closer than ever, and a few key elements are enough to make sure a web-design is ready for people that live with disabilities.
Colorblindness is easy to understand. One or more of the receptors in the eye are defective, which can reduce the color spectrum and make it difficult to tell the difference between hues. It’s also one of the most common: 1 in 4 families has someone that is colorblind, that is 1 in 200 women and 1 in 12 men.
There are three major types of color blindness: The most common, Deuteranopia, which shifts the perception of green tones; Protanopia, which shifts red tones, and Tritanopia, which shifts mostly yellow tones. The rarest version, called Achromatopsia, is basically black and white.
As a web or UI designer, modifying your design to make it accessible for those who are color blind is not only the right thing to do, it’s also quick and easy:
1. Test using Color Oracle, a color blindness simulator.
This useful tool (for MacOS, Windows and Linux) simulates and shows in real time how people with vision impairments see the web. This is the first and simplest step to make sure a design is approachable by a wider audience.
2. Use a Full Range of Value.
A great website design should be understood in pure black and white. Value is one of the most valued (pun intended) tools by the best designers to build strong foundations.
See this example:
The first one has two different hues, but its values are very similar, thus lacking contrast, so people with Achromatopsia won’t be able to distinguish the colors.
The second, on the other hand, has opposite and easily distinguishable values with great contrast.
Applying a grey scale filter confirms that the design is on point and accessible by people with Achromatopsia, and virtually everyone.
3. Change your color palette.
It’s common to see palettes using red and green colors for UI, but those will present an issue for color blind people. On the other hand, blue and orange is a much better color combination that will be visible for those with Deuteranopia, Protanopia and Tritanopia. Again, these can be easily tested using the Color Oracle tool from the beginning.
One last trick that can be used to convey more information or improve clarity, is to use icons, patterns and text in the design. Mind you, this tip has a caveat, as it can be easily overdone and create more confusion than clarification, so it should be used carefully.
Companies are becoming more aware of the importance of designing for everyone. One of the organisations in the forefront on this issue is Apple, with an entire page dedicated to all the accessibility features they’ve developed. Apple’s CEO Tim Cook even stated that they don’t look at it from a return on investment point of view, but from a human rights point of view.
At the end, accessibility benefits us all. It makes lives easier for color blind people, it increases the skill of its designers, and improves the overall experience for everyone else.
This is a blog post expanding on the article from Toptal “Importance of Web Accessibility”.
