Make sure that all the instructions and visual elements in your eLearning resource, can be understood by everyone, including people who are colour blind.
How do I comply?
Do not use colour alone to convey meaning in the following situations:
- Conveying information e.g.
- On question feedback showing correct answers in green, and incorrect answers in red.
- On a bar chart showing UK sales in dark blue, and US sales in dark purple.
- Indicating an action e.g.
- Showing links only by colour and not by any other indicator.
- Prompting a response e.g.
- Using colour to show if any quiz questions have not been answered.
Always use additional information to supplement colour e.g.
- Use an icon such as a tick to show if a quiz question is correct.
- Use pattern as well as colour on a chart.
- Use a key or a text explanation to explain the meaning of a complex chart.
- Use underlining as well as a different colour to show a hyperlink.
- Colour blindness (colour vision deficiency, or CVD) affects approximately 1 in 12 men (8%) and 1 in 200 women in the world.
- People who are colour blind, will not be able to understand instructions or visual elements if you rely on colour alone to convey your meaning.
- Many older people find it difficult to distinguish colour.
- Learners who may be using text-only, limited colour, or monochrome displays will also benefit if you do not rely on colour alone to convey your meaning.
1. Feedback page
The following Storyline page shows how text and an icon have been used to supplement colour to show that an answer is incorrect. This feedback can therefore be understood by all learners.
Feedback page seen by a learner with normal vision
Feedback page as seen by a learner with achromatopsia shown with the I want to see like the colour blind Chrome extension
2. Bar chart
The layout, key and high contrast colours used in this CourseArc bar chart, mean that it can be understood by all learners, even if they are colour blind.
Bar chart showing good use of colour contrast and key
A bar graph showing 6 European countries and their arms spending leading up to, and during World War 1. The colours change in the chart as it transitions through all the forms of colour blindness, as seen with the I want to see like the colour blind Chrome extension. The video moves through normal, protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly. Although the colours change, it is always possible to understand the chart.
How can I test?
- There are several tools you can test to see how your eLearning resource will look to a colour blind user. Two of these tools are listed in the Useful links section.
- Alternatively you can change your screen display settings to grey scale and make sure you can still understand all of your content.
- I want to see like the colour blind
Chrome extension which allows you to experience any web page as if you were colour blind.
- Coblis: Colour bind simulator
Upload any image to see how it would look to people who have different types of colour blindness.
- Colour Blind Awareness
Overview of the different types of colour blindness.
- Smashing Magazine: Improving accessibility for colour blind users
Web design examples which can be easily translated into an eLearning context.
|Guideline||1.4 – Distinguishable|
Make it easier for users to see and hear content including separating foreground from background.
|WCAG link||1.4.1 Use of colour – Level A|
|WCAG text||Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.|
Copyright © 2019 W3C ®
Please help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.