Colour accessibility and visual design
Ensuring the text colours in your digital interface are accessible to all users is an important aspect of well-executed visual design. Here's what you need to know.
If you’ve ever been asked 'I assume all the colours are accessible?' and were unsure what to answer, this blog 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 reply 'Of course!' with conviction.
Visual design plays a significant role in communicating a brand's proposition and personality. When it works well, digital design is appealing and appropriate in tone for the audience. Equally important though is making sure that what you’ve designed works for everyone, and does not exclude any users or prospective customers.
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.
Understanding colour accessibility
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 are living with 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.
Design with additional visual cues to support meaning
Colour is commonly used to convey information in interfaces. For example:
- Graphs and charts often rely on colour to differentiate entries
- Websites are often colour-coded to differentiate sections
- The active item of a menu is often signified with a stand-out colour
- Buttons are often coloured to attract attention, or indicate their purpose
- Forms elements use colour to show focus, correct entry or errors
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 since the perceived colour contrast is too low.
The colours red and green are often used to indicate meanings, such as positive or negative percentages, and success or error states for forms.
But, take a screen-grab of such an example, apply the Photoshop Colour Blindness filter, and you'll immediately see the important role played by other visual cues to convey meaning, where colour alone is insufficient. With percentages, for example, it might be up or down arrows, and for a form, it might be the use of ticks and crosses.
Designing for sufficient colour contrast
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.
Identify whether text needs to be compliant
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), have no minimum contrast requirement. (As a side note though: why would you set your logo with colours that make it unreadable for some of your customers?).
Define the minimum contrast for each type of text
There are two contrast ratios to remember:
- 4.5 – 1: For regular weight text under 18pt in size
- 3 – 1: For regular text size of 18pt or over, and bold weight text under 18pt in size
As you can see, the weight of the font you use influences its 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
Check colour accessibility using grey scale
Checking your design in grey scale can be very revealing, with some parts of your web page becoming completely unreadable. Try it out for yourself, and, for further explanation, please refer to the W3C guidelines on minimum contrast.
A process to guide your visual design decisions
Here’s a whistle-stop journey through colour accessibility, based on a fictional design project.
1. Design in greyscale
The simplest place to start is to design in greyscale, as this forces 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.
2. Add colour to your design
Your choice of colours will depend on the look and 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).
3. Check your design for contrast
Now it’s time to check if your design meets the mark. You can do this in 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.
The main offenders are often coloured text boxes and coloured link text.
4. Adjust your colours
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:
- Enter your text HEX colour reference into the field at the top field of the Foreground Colour box.
- Enter the background colour HEX colour reference into the Background Colour box.
- The contrast ratio and compliance rating is displayed on in the Results box on the right hand.
- If you’re getting ‘NO’ it means that your contrast ratio too low.
- To adjust the colours and find a compliant colour combination, the easiest thing to do adjust the Saturation and Value sliders.
- When you get a ‘YES’ on the line WCAG 2 AA Compliant field you know that you’re on to a winner.
- Copy the HEX values and paste them back into Photoshop to adjust the colours of your elements.
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.
In summary
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.
There's a compelling business case for inclusive design, and, what's more, a focus on accessibility improves usability for all your users alike.
