Designing for Colour Blindness
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
Even people who have monochromacy still have a sense of contrast — the scaled difference between light and dark. To ensure your website is readable for people with visual impairments, you must make sure your content contrasts well with your background. For example, black text on a white background will have a high level of contrast and readability. Whereas yellow text on a white background has a low level of contrast and will be barely readable, even for people with full vision!
We use a great contrast ratio tool to visually test how readable colour combinations are. The tool is pretty self explanatory, give it a try in your next project. Handy tip: When testing your designs, use the smallest/oldest compatible device you have, ideally in bad lighting conditions in order to understand ‘worst case scenario’ user experience. For example, it’s no good designing an alarm clock app if users cannot read the content in the dark.
2. Use different shades rather than multiple colours
A monochromatic colour scheme (not to be confused with full colour blindness, monochromacy) makes use of multiple shades of one colour, rather than using various different colours. This will effectively minimise colour related frustration, and is a great way to include contrast in your designs. A monochromatic colour scheme doesn’t have to be black and white, using multiple shades of blue we can create a visually pleasing design with complete readability.
3. Experience colour blindness yourself while designing
Colour blindness simulation in Adobe Photoshop
There are many free tools available that can mimic the effects of colour blindness, allowing you to understand how a colour blind person would see to ensure that your user interfaces work just as you intended them to. Photoshop has its own (slightly hidden away) proof setup feature, simply go to view > proof setup, and then you can choose between protanopia and deuteranopia. When you’re done testing, simply switch back to monitor RGB.
Colour blindness simulation in Sketch
Unfortunately there is no native support for Sketch colour testing, however there are various plugins that allow you do to the exact same thing. We recommend Color Oracle, a free plugin that shows you in real time what people with common colour vision impairments will see.
Colour blindness simulation in Browser
We use a Google Chrome add-on creatively called “I want to see like the colour blind” that lets you simulate colour blindness on live websites or in a testing environment. This is a handy tool for colour and contrast testing as it offers multiple viewing modes including full monochromacy.
4. Choose colour combinations carefully
Unfortunately, as designers we don’t always get to choose the colours that we use in our designs, sometimes we’re limited by brand guidelines. But where possible, it’s wise to choose and test your primary and secondary colours before you establish a brand. Below is a chart of colour combinations that you should avoid using.
If in doubt, avoid colour altogether and go for a simple black/white, high contrast colour scheme!
5. Use texture in place of colour
When designing things like graphs and infographics, consider making use of texture or visual patterns to help differentiate between two colours. For example, take the pie chart below. A user with protanopia would find it hard to differentiate between the different slices due to the colours being too similar. However, if we simply add some texture or patterns, the graph is 100% more readable.
6. Avoid using colour alone as an indicator
When designing elements like forms and complicated interfaces, you should never use colour alone as an indicator. Take the forms below as an example. The one on the left only uses colour as an indicator that something went wrong. A person with normal vision will be able to see that the email field has turned red, indicating there has been some kind of error. However, to a person with deuteranomaly, the green of the success field is indistinguishable from the red of the error field. The best way to combat this issue is to use some kind of icon, symbol or label to indicate that an error has occurred, as seen on the right.
The most important lesson to learn here is that unless you’re absolutely certain that somebody with colour blindness can differentiate between the colours you have chosen, then you should never use colour alone to indicate something important. Where possible, use icons, text, shapes, textures or other visual cues as well as colour when communicating information to users.
Quote: Si digital