When designing for accessibility, one area that often gets overlooked is colour blindness. This might stem from the misconception that there are so few colourblind people that it’s not worth compromising your beautifully customized colour palette. Or perhaps it’s the feeling that people who are colourblind are used to navigating the world of colour, and your designs won’t make a difference in the end.

In reality, the frequency of colour blindness is fairly high. One in 12 Caucasian (8%), one in 20 Asian (5%), and one in 25 African (4%) males are so-called “red-green” colour blind. Globally, around 300 million people are colour blind, making it more common than AB blood type.

Types of Colour Blindness

The human eye has three types of cone cells, each expressing different types of opsin genes, and each sensitive to red, green and blue respectively (RGB). Colour blindness is when the function of one of these opsins is not optimal.

Colour blindness is not a total loss of colour vision, but rather the loss of clear distinction between certain ranges of colours. The majority of colour blind people have difficulty with reds and greens: protanopia (defective red cone cells) and deuteranopia (defective green cone cells). There is also the more rare tritanopia (defective blue cone cells).

Potential Problem Areas

Infographics such as charts, graphs, etc. (and wherever colour is used to distinguish different data) typically pose the biggest difficulty. Especially wherever green and red might appear. But beyond distinguishing between certain colours, other problem areas that characterize colour blindness can include:

• Failure to see some objects, such as dark red or magenta symbols and thin lines over black or dark blue background. This includes fonts as well.
• Difficulty seeing emphasized parts, such as dark red characters in black text (for protanopes, dark red appears similar to black).
• A lot of difficulty telling the names of colours. Recognizing a difference between colours and identifying the names of colours are 2 very different tasks (something to consider).



Ways to be more inclusive with your Designs

Luckily we are not left in the dark. There are many organizations and strategies that can help guide our designs in terms of colourblind accessibility. According to the Principles of Color Universal Design (CUD), here are a few:

1. Choose colour schemes that can be easily identified by people with all types of colour vision, in consideration with the actual lighting conditions and usage environment.
2. Use not only different colours but also a combination of different shapes, positions, line types and colouring patterns, to ensure that information is conveyed to all users including those who cannot distinguish differences in colour.
3. Clearly state colour names where users are expected to use colour names in communication.
4. And ultimately, aim for visually friendly and beautiful designs.



And yes, you should still use colours…but just be aware

The Okabe Ito colour Palette, invented by Masataka Okabe and Kei Ito of Color Universal Design (CUD) in 2002, is a good universal palette whose colours are better distinguished by colour blind people. Although originally created for print, hex values can easily be extrapolated.

IBM has also released a colour blind safe palette that seems to have a more vibrant persuasion, and whose hex values are readily available. And thirdly, Paul Tol’s deep dive into various palettes representing bright, high-contrast, muted, pale, etc, variants of similarly colour blind safe palettes is also quite impressive.

Redundant Coding

Another suggestion from Okabe and Ito for accessible design is redundant coding, which can include:

• Do not display information in colour only. Instead use a combination of colours, shapes, symbols, various hatching, numbers, letters, etc.
• Keep the number of colours to a minimum. Use combinations of different symbols with a few vivid colours, rather than a single symbol with many colours.
• Make sure colour contrast is in both hue and brightness.
• For graphs and line drawings, label elements of the graph on the graph itself rather than making a separate colour-coded key, since matching the same colours in distant places is extremely difficult.
• Red does not appear as bright and vivid colour. Avoid using red characters on a dark background.



Recommended tools and resources that address colour blindness:

Hardware:

• Colour vision deficiency simulation monitors
• Color Universal Design (CUD) Handbook



Software & Sites:

• Recent versions of Adobe Photoshop and Illustrator feature the CUD proof function that verifies if your designs are suited for colour blindness or not. This function is built into the colour-management system, so conversion is easy.
• Vischeck is a classic and established colour blind-proof software.
• Toptal has a neat colour blind web page filter that simulates the different types of colour blindness.
• Coloring for Colorblindness an interesting site comparing various colour blind safe palettes.
• Google Accessibility has a Color Enhancer Chrome Extension.