Accessible use of colour
Colour is used in webpages, documents, emails, charts, infographics and many other digital content. But is our use of colour accessible?
There are certain medical conditions and many external conditions that make it difficult for people to perceive colour. For example, in overlit areas (exposed to sunlight) or under-lit areas it is difficult to see content when the background and foreground contrast is not sufficient. On the other hand people with Irlen syndrome may have difficulty with black text on white backgrounds while people with colour vision deficiency may not be able to understand content differentiated by colour alone. There are several Web Content Accessibility Guidelines (WCAG) that address the issue of colour accessibility.
Use of colour
Making colour coded content accessible
Coblis Colour Blindness Simulator
Colour contrast
High and low colour contrast (demonstration)
Check colour contrast
Brand colours and contrast
Photo backgrounds
Competing accessibility challenges
Use of colour
Colour should not be used as the only means to differentiate content. This is because people with colour vision deficiency may not be able to perceive content differentiated only by colour. Look at the example shown. Here, for the question "What is the speed limit in a residential area?", the correct answer (30mph) is indicated by green colour while the distractors (50mph, 60mph, and 70mph) are shown in red.
The same content could be "seen" differently by a person with a colour vision deficiency.
Expand to view how the same image could be "seen" by a person with monochromacy/achromatopsia
The information differentiated by colour is lost for that individual. This is why it is important not to just use colour to differentiate information. For example, you could use a * symbol to identify the correct answer.
Making colour coded content accessible
Now with this knowledge of the accessible use of colour, what do you think of colour coded content such as traffic light systems we often use in risk registers, status updates, etc.? Are these accessible?
Accessible traffic light system example
Digital Technology Services (DTS) uses a status board . Notice how the colour and a symbol is used to differentiate different statuses making the status board more accessible.
Coblis Colour Blindness Simulator
Colour blindness simulator website
Use to explore how various colour combinations are viewed by people with different conditions. Use the image provided or upload an image you wish to examine. Click on the radio buttons to simulate different conditions.
Colour contrast
Sufficient colour contrast between background and foreground is important to make content visible to everyone. video shows why good colour contrast is essential for some and useful for all.
There are certain colour contrast levels (between background and foreground) that must be met under the WCAG 2.1 AA standards for accessibility
- Normal text 4.5:1
- Large text 3:1
- Non text user interface components and graphical objects 3:1
High and low colour contrast (demonstration)
When there is sufficient colour contrast (that is at least 4.5:1 ratio between background and foreground) text is easier to read. When the contrast is low (for example, 1.47:1 as shown in the image), text is much harder to read.
Check colour contrast
Use to f