Use additional methods such as icons, patterns, underling, table keys etc. to supplement information which is conveyed by colour alone.
How do I comply?
Common issues in eLearning resources which use colour alone to convey meaning include:
- Quiz question feedback showing correct answers in green, and incorrect answers in red.
- Charts with bars or lines shown in similar colours such as blue and purple.
- Hyperlinks shown only by colour and not by any other indicator such as underlining.
You can solve these issues by always using additional methods to supplement colour e.g.
- Use icons such as ticks and crosses to supplement green and red to show if a quiz answer is correct or incorrect.
- 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 use to 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.
- NoCoffee vision simulator
Chrome extension which simulates different types of visual impairments including colour blindness
- Coblis: Colour blind 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.|
Help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.