Seek Product Blog

Product blog Updates & Insights from the Product & Technology teams at SEEK

Press the pink button — Designing for colour blind users

17 Jan 2017

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?

number 57 in dots
What do you see? If you can’t see the number you may have 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.

link to twitter

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.

apply for this job - 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.

image of aux video cables
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.

image of video cables
AUX cables with different textures to disambiguate the colours

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.

error message highlighted in colour
Communicating with colour only — 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).


Communicating with colour and iconography — error fields

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 chart with no labels
Pie charts with similar colours

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.

pie chart with labels
Better pie charts with in context labels

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.

white text on red
Contrast ratio: 1

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.

menu in colour
Contrast ratio: 4.26

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

list of trello labels

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.

image of kayla
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”.

A previous version of this blog post said ‘suffer’ from colour blindness. This has been updated after feedback:

“I don’t suffer from colourblindness. I’m fine with it.”

*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.

cartoon of person with rubix cube
Always look for the grey lining

Written by Kayla Heffernan, User Experience Designer

This post also appears on my personal blog – http://www.kaylaheffernan.com/blog/2017/1/17/press-the-pink-buttondesigning-for-colour-blind-users