Insights

Inclusive Design:Colour Accessibility

Colour blindness is the common term used across the web when talking about creating better colour accessibility. However, the total loss of colour is very rare. Colour Vision Deficiency (CVD) is the term that should be used to be inclusive of all types. Colour Blind Awareness states there are approximately 300 million people who have CVD. Being inclusive isn’t just ethical best practice, there are legal implications if your website is not accessible. For instance, Apple was sued for their website being inaccessible to the visually impaired.

Designing for CVD is a step that we can take as designers to include everyone. By designing for one, you can extend that to many. By solving the colour in your designs, you can help not just those with a permanent disability but also those with temporary and situational limitations. For example, improved colour contrast helps those who are in bright conditions.

In this article, we’ll be going through what the grading system is for colour contrast, how to make smarter colour choices and how to design more inclusive elements.

Contrast Grading

Contrast is graded as A, AA and AAA. The AAA grading being the gold standard for accessibility. The minimum level your contrast should be to pass W3C’s standards is AA. When checking your typeface contrast for buttons, background legibility or navigation bars, 2 versions will be graded. Regular type sizing and large. Regular is defined by a regular weight and at 16px, the minimum standard for body text sizing. Large can be defined in two ways. The first is a bold weight at 18px, and the second is a regular weight at 24px.

Chart showing colour contrast gradings.

We’ve put together a chart above to demonstrate what fails and passes the contrast checker. It shouldn’t be revolutionary to know that white works better on darker hues, and black works better on lighter hues. It’s important to note that in the passing examples, the colours are toned down, they’re not a bright neon like the left column. A softer tone is easier on the eyes.

Don’t feel the need to only stick with black or white either as shown on the far right column. Experiment with your brand colours to find what works. Your branding should be flexible by allowing tones of colour.

There are plenty of options in order to check your contrast. Here are a few that we would recommend:
Stark
(Sketch & Adobe XD Plugin), Colorable (Web), Colorsafe (Web)

Colour Combinations

Now we’ve talked about contrast on a general accessibility level. We’ll now get into what you can do to be accessible for those who do have a colour vision deficiency.

We’re going to continue the theme of contrast but instead move onto the contrast between two or more colours. Red and green, seen by anyone with normal vision, are clearly a striking contrast when put together. We use these colours to distinguish between error and success, good and bad, slow and fast, stop and start. But someone with Protanopia can only see yellow hues in their place.

CVD’s are split into 4 types. Normal vision can see all 3 cones of light, Red, Green and Blue.
Protanopia is reduced sensitivity to red light
Deuteranopia is reduced sensitivity to green light
Tritanopia is reduced sensitivity to blue light
Achromatopsia is total or reduction with all 3 colours.

Showing examples of colour combinations to avoid and combinations that work for people with a colour vision deficiency.

Colour combinations to avoid with CVD’s in mind are; red/green, light green/yellow, blue/purple, blue/grey, green/grey, green/blue, green/brown and green/black. The easiest way to check your colours and have a better understanding of your designs is to use a simulator to show you how a person with CVD would view your designs. Stark (Sketch & Adobe XD Plugin), Spectrum (Chrome extension) and Oracle (Mac & Windows) are resources we would recommend to help.

Patterns & Shapes

For this section, we’re going to talk about how patterns and the use of shape can be the difference between your design being inclusive or not.

We’re going to start with a classic example of graphs. Think of a bar chart. You’ve used bright colours to represent each section, they complement and clash against each other to stand out on their own. In the below example we’ve shown the difference between normal and tritanopia vision. We could have used total loss of colour to represent the lack of contrast, but we wanted to represent all the types in our examples and not just rely on the other end of the scale.

What you can do to be mindful of CVD in the example of designing graphs it to either use tones of one colour if you have a small number of sections. The second option is to use patterns to create a unique mark that’s distinguishable. Trello have used patterns to create a “colour-blind friendly mode” for the application of labels. A great example of thinking about everyone and not just the majority.

Colour swatches showing how adding patterns makes them more inclusive to colour blind users.

Let’s now talk about the use of shape. Using shapes to represent keys instead of just colours are a good use case. For example, using a traffic light system of green, yellow and red. Instead of relying on just colour, you can make the key a green circle, yellow triangle, and red square.

The example we’re showing to explain the importance shape is the difference between 2 messaging apps. These are the states they use to show when a message is sent, delivered and read. The left example is a representation of WhatsApp, they’ve made sure to show the difference between sent and delivered messages, however, they fail at making a clear difference between a message being read. For some with total loss of colour, they would never have an idea if their message had been read.

Examples showing WhatsApp and Messenger message sent states. WhatsApp is not colour blind friendly. Messenger is.

Messenger has clear states, though not changing the main shape of their icons. They use stoke and filled icons to visually show the difference which doesn’t rely on the need of colour to represent this.

Buttons & Forms

For buttons and form elements within your designs, there are many factors that you can use in order to not rely on colour for primary buttons or error states for forms. Play around with borders, type weight, type sizing, opacity, placement and the use of icons to make what you need to stand out. Also, don’t forget to underline your links if they’re not going to be in a button style.

Left column showing 2 coloured buttons and how they look to someone with CVD. Right column showing how to create better contrast between buttons.

Below, we’ve put together an example of app bars. This is more of a guide than a rule. There are many popular apps that choose to only use icons for their navigation options. It’s worth to note that this works because of familiarity and the use of universal icons. We’re talking about colour and contrast though. The use of background contrast, opacity contrast between inactive tabs and difference in icons are all way to make navigation perfectly clear.

4 app bar examples showing 4 levels of creating contrast between active and inactive states

Colour Descriptions

We tend to use colour as a way of personalising our own space. Twitter is an example of this, you can pick a theme colour for your profile. Twitter, however, is not a good representation of inclusive design. What they have got wrong for this feature is only providing squares of colour. All they have to do to make this feature more accessible is to provide a label with the colour name. It could be a list or it could be a hover tooltip. It’s such a simple addition to include.

Now personalising a twitter page colour is just a nice to have feature. So the main example for this section is going to look at the shopping experience. In example of Amazon, Ebay and Asos, they all do the job of making sure their colours are labeled. However, there are some examples where they miss the mark with the point of naming colours.

Left column showing Levi's jean swatches, option selected is called Make a mark. Right column showing how the swatches should be shown and labelled to be inclusive to those with colour vision deficiency.

Just like a Yankee candle called “A Child’s Wish”, if we told you the colour of a pair of jeans was “Make a mark”, could you describe the colour of them? What may be a bit of a fun delight to those who can accurately see the colour, and a fun activity for the company to be creative, it is just irresponsible towards anyone who has a vision impairment.

User Test

We’ve talked a lot about what you should do when you’re designing. Designs should be data-informed, however, they don’t need to be data-driven. What we mean by that is, you could follow everything that we’ve suggested and then user test your designs. Your users may come back with feedback that goes against something that you have followed here. It doesn’t mean we’re wrong with the information we have learned and it doesn’t mean your user is wrong with their opinion.

A great example we found about colour contrast demonstrating this article about using black or white text on an orange background. Using white on orange tends to fail the contrast grading, however, a majority (including people with CVD) found white text easier to read over the black text that passed the contrast grading.

The solutions we have demonstrated are not applicable for every solution, but the principles of them should help you with any future design decisions you make in order to be more inclusive for people with CVD.

 

We help teams across the UK deliver successful digital projects. If you’d like to have a conversation with us, we’ll put the kettle on.

Drop us a line

Insights

Curiosity is what drives us to learn and grow professionally enabling us to remain vigilant to change and the opportunities it presents for our clients. We document some of this learning and share it via our 'Insights' section.