Making sure that text colours in your digital interface are accessible for your users is a really important aspect of a well executed visual design.
If you’ve ever been asked “I assume all the colours are accessible?” by your client and were unsure of what to answer, then this post is for you. The tips below will help you to comply with the W3C guidelines for text and colour so that you’ll always be able to make a confident response of “Of course!”.
Visual design plays a large role in communicating the business’ proposition and personality. When this works well, the design is appealing and appropriate in tone for the audience. Equally important though is making sure that what you’ve designed works for the broadest possible audience. For the subject of this post we’ll consider people with colour-blindness.
Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it
Colour is an inexact and relative art. We all see colour slightly differently and our perception is literally ‘coloured’ by the context in which we view it, such as a device’s screen and the surrounding environment.
Being inexact we need to select colours that will perform well within a range of environments, e.g. bright or dark lighting environments, and that can be perceived by those with vision perception deficiencies. This should not be under-estimated as roughly 8% of men and 0.5% of women worldwide live some form of colour blindness.
In practice, colourblind people confuse certain ranges of colours, the main challenge being able to detect the difference between certain colours. The colours depend upon the type of colour blindness, however the most common form is the perception of difference between red and green.
The image below shows 2 mugs, one green, the other red. Left: standard vision. Right: how the image is perceived with a form of colour blindness – red and green are almost indestinquishable.
Colour is commonly used to convey information in interfaces. For example:
As demonstrated above, the problem here is that colour alone can not be relied upon to convey difference. If we used the colours alone to indicate something important such as ‘stop’ or ‘go’ – the meaning would be lost as the perceived colour contrast is too low.
The example below show the colours red and green used to indicate meaning: positive and negative percentages and success and error states for forms.
Now the same image with Photoshop Colour Blindness filter applied, you can see that it’s the additional visual cues of the up and down arrow for percentages, and the form’s tick and cross supply a second route to convey meaning when colour alone wouldn’t be enough.
The next thing to crack is ensuring that the foreground (text) and background colours you use provide enough contrast to allow colour blind users or those using a monochrome screen to view information.
Text with meaning will account for most, if not all, of the text on your screen, such as headings, body text, labels, tag, buttons etc. These all convey useful information and need sufficient contrast.
Text as decoration e.g. text that is not intended to be ‘read’ and logotypes (the text that is part of a logo or brand name). These have no minimum contrast requirement. But why would you set your logo with colours that make it unreadable for some of your customers?
There are 2 contrast ratios to remember:
As you can see the weight of the font you use influences it’s legibility. So also bear in mind that if you like to use lighter weights you should check that your contrast ratio a little higher than 4.5 – 1, to be on the safe size
The image below demonstrates a variety of foreground and background colour combinations. The last 2 examples are particularly hard to read.
Checking your design in grey scale can be very revealing. Below: The previous image converted to greyscale. Notice how the bottom 2 examples of become completely unreadable.
For further explanation please refer to the W3C guidelines on minimum contrast.
Here’s a whistle-stop journey through a made-up design project.
The simplest place to start is to design in greyscale, as this focuses the designer to consider layout and visual balance before tackling the subjectiveness of colour. The design should be clear and easy to read, with a thought through text hierarchy in terms of position on the page, size, weight and shade.
Your choice of colours will depend on the look & feel of your brand’s visual identity. This is time for experimentation to get the overall look you want – in this case, bright and vibrant background colours.
Now it’s time to check if your design meets the mark. You can do this several ways. I tend to look at the design in greyscale once again and see what effect the Photoshop Colour Blindness filter has on the overall design.
Below is the design in greyscale and with the Colour Blindness filter applied.
As you can see below – the main offenders are the coloured text boxes and blue link text at the bottom of the layout.
Whereas the 2 buttons (top right) passed the AA compliance test in the Snook Colour Checker, this was because their larger type size required a lower contrast ratio of (3 – 1).
So now you know where the problems lie, it’s time to correct them by optimising your colour choices. We recommend the Snook Colour Contrast Checker Tool. To use it:
After going through the design and making corrections to the non-conforming colour combinations, we arrive at a design which we can confidently state as colour contrast accessible.
It’s not difficult to arrive at an accessible visual design, it just takes a bit of extra time as you refine your design and colour palette. The satisfaction gained from designing inclusively for the widest audience is very rewarding and will put you in a position for when you the client asks that question “Are the colours accessible?”. The answer will be a very confident “Yes!”
Types of colour Disabilities
W3C: Contrast (Minimum): Understanding SC 1.4.3
Keen to learn more? Check out our Visual Web and Interface Design course!