Do we all see colour in the same way? Take a look at the image above. If you see the number 21, or you don’t see any number at all, it’s likely that you have some kind of colour blindness (if you have full colour vision you should see the number “74”).

It’s estimated that around 1 in 12 men (8%) and 1 in 200 women have some form of colour blindness. In the UK this means that there are approximately 2.7 million people affected, a considerable amount of the population, but they are often forgotten when it comes to designing websites and user interfaces.

At Si digital we consider user experience and accessibility throughout every project. We use a variety of tools and techniques to help us understand visual impairments and use this knowledge to make our websites more usable and less frustrating for people who are colour blind.

What is colour blindness?

There are many types of colour blindness with different degrees of severity. It’s a common myth that people with colour blindness only see in black and white. Although this can be true, Monochromacy (also known as total colour blindness) is extremely rare, with an estimated 1 in 33,000 people affected. This severe visual impairment only allows an individual to see in greyscale. An important factor to remember is that for most people with colour blindness, distinguishing between different colours is not too difficult, it’s telling the difference between shades and brightness levels of similar colours which causes issues.

The more common condition is red-green colour blindness, which is split into two groups. A person with Protanomaly has reduced sensitivity to red light. Red, orange and yellow hues tend to shift towards green, and appear less saturated. A person with Deuteranomaly has reduced sensitivity to green light, and will have difficulty distinguishing between blue, yellow, violet, reds, blues and greens.

Colour in the wild

For a long time, the difficulties that arise from colour blindness have been ignored, not only in website design, but also television, movies and especially video games. There are many cases of users not being able to play a game, or being unable to progress because of essential UI elements being indistinguishable to somebody who suffers from colour blindness. Take this example from The Witcher 3 –

See how the red markers on the floor become near invisible when switching to red-green colour blindness.

The game features an ability to use heightened senses to follow scents, track footprints and find clues. However, the game developers chose a deep red colour as a marker, so there have been many users complaining that they couldn’t see these markers very well (or at all). A simple colour change, or the option to change colours, would have made this game more accessible.

Colour blindness is a matter which needs to be taken seriously due to the high percentage of the population with vision impairments. If your website or application is particularly unoptimised, you could be losing a large amount of customers. For example, if a user can’t differentiate between a series of icons because of clashing colours and lack of contrast, that user could get frustrated and find an alternate service. If that is the experience of every potential customer who suffered from colour blindness, you’re losing over 8% of potential sales — for a business with £10,000,000 in revenue, they could potentially lose a huge £800,000 in sales!

How to design with colour blindness in mind

Although colour blindness can cause huge problems for users, it’s actually quite simple to combat. If you’re aware of the issues, then you’re already half way there.

1. Use contrasting colours