We use colour as a signifier for people, places and things all the time. Probably more than you realise.
“Who is she again?” “The girl with the pink hair.”
- “Where are we going for lunch?” “The orange painted cafe.”
- “Which container?” “The yellow one.”
Without colour, these nouns can be harder to describe. The most distinctive thing about the girl with the pink hair is, probably, her hair. How do you explain her to a colour blind person?
What do you see? If you can’t see the number you may suffer from colourblindness (via http://colorvisiontesting.com/)
What number do you see in the above image? You should have seen 57. If you see 35, or no number, you likely have colour blindness.
About 8% of Australian males and 0.4% of females are colour blind*. There are various kinds of colour blindness. You’ve probably heard of red-green colour blindness and know that’s why traffic lights are split out separately. Some people see colours differently than they appear to those with ‘normal’ sight, some only see varying shades of grey. Neil Harbisson has the rarest form of colour blindness, achromatopsia, and only sees the world in shades of grey:
I’ve never seen color, and I don’t know what color looks like, because I come from a grayscale world. To me, the sky is always gray, flowers are always gray, and television is still in black and white.
— Neil Harbisson, I listen to color TED Talk
Like Neil, many colour blind people memorise or pick up colour-based facts, but can’t actually see the colours:
- Roses are red
- The TARDIS is blue
- Grass is green
- Oranges are… well, orange.
While he knows these facts, my partner can’t tell things like the colour of my hair, or eyes. He can’t explain what colour something is, or describe what colour he is seeing.
This means mistakes happen. I’ve asked my partner to chop the green capsicum to find that he’s chopped the red one.
Like all people with ‘disabilities’, there are certain things colour blind people can’t do (e.g. be a pilot, tell an unripe banana from a ripe one on sight alone). Design can help make the world more accessible to ensure they can do everything those with ‘normal’ vision can.
Designing with colour blindness in mind
Don’t use colour-based instructions
Don’t tell a user to “hit the pink button”, if they cannot see which button is the pink button.
Hit the pink button
Okay, in this example it’s probably obvious which button to press, but let’s look at another example.
Remember old-school AUX cables? Plug the yellow plug into the yellow socket.
AUX cables as the appear in normal vision vs tritanopia (blue-yellow colour blindness
Not so easy with colour blindness. But if we put labels on these cables they become more accessible and easy to use. Even better — different textures on the different prongs (as per the picture below). This way people with low or no vision are able to determine yellow from red too.
AUX cables with different textures to disambiguate the colour
Don’t rely on colour only to communicate information
If we only use colour to convey information, this can easily be missed by people with colour blindness.
Communicating with colour only — error field
ommunicating with colour and iconography — error fields
You have to really be paying attention to notice hint text change to an error if it’s only represented with colour (and you have colour blindness).
However, if we also use an icon the error is easier to detect, and therefore correct.
Another example where colour considerations are vital are graphs and charts.
Pie charts with similar colour in normal and tritanopia vision
This pie chart takes much longer to interpret for people with colour blindness. If your colours do not have enough contrast, this task may be impossible.
Better pie charts with in context label
Putting labels in context, makes this pie chart much easier to digest for all users, and makes it much more accessible to users with colour blindness.
Test contrast ratios
Contrast ratios can be used to determine whether or not colours can be read by people with colour blindness or low vision.
Contrast ratio: 1
Contrast ratio: 4.2
Some of these are obviously difficult to read for people with colour blindness, low vision or even just in situations with glare on their device.
Others are less obvious. In this example the text probably looks accessible to you, if you have typical vision. However this fails the WCAG AA contrast ratio recommendations of 4.5
I use accessible-colors.com ** in conjunction with ColorPick Eyedropper chrome extension to assess the contrast ratio.
Consider if you need a colour blind mode
If colour is a large part of your interface, you may decide to enable a colour blind mode rather than ‘clutter’ the interface for all users.
Trello allows you to turn on colour blind mode for labels so that colour is not the only indication of label status.
MOBA video game DoTA 2 has a colour blind mode to show a map view of your team (blue) as tear drop shapes, and the enemy (red) team as arrows to differentiate.
Just make sure that this setting is easy to find for individuals who need it.
Test with real users
As with any design, you should be testing with real users.
I’m always annoying my partner with colour blind based questions and showing him examples, as well as asking colour blind people in the office to help out. Since tech is predominantly male and men are more likely to be colour blind, you probably have a few hiding in your office. We’ve received feedback on designs from a colour blind PM that he knew what was meant to be the main call to action (CTA), but he couldn’t visually see it as different from the background. This feedback enabled us to revise the design.
If you can’t access real users, or want to experience colour blindness for yourself, I use the “I want to see like the colour blind” chrome extension.
What I look like in protanopia vision
You can also use it to see what you look like to people with different kinds of colour blindness. Apparently, to my partner, my hair is what those of us with typical vision would call “puke green”.
*Source http://www.visioneyeinstitute.com.au/article/colour-blindness/
**Full disclosure — I know the developers of accessible-colors but I do use this tool almost every day, I wouldn’t use it if it wasn’t great.
Always look for the grey lining