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.

Why?

  • 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. 

eLaHub examples

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.

A Storyline page which tells the learner that the answer they have given is not correct. The image shows how this slide would be viewed by a learner with normal vision. At the top of the page there is a red bar which has a cross and the word Incorrect in it.

Feedback page seen by a learner with normal vision

A Storyline slide which tells the learner that the answer they have given is not correct. The image shows how this slide would be viewed by a learner with achromatopsia. At the top of the slide there is a dark grey bar which has a cross and the word Incorrect in it.

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.

(No audio)

Bar chart showing good use of colour contrast and key

Video shows:
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.

Further information


WCAG information

CategoryPerceivable
Guideline1.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 textColor 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 ®


Beta page
Please help us to make this page better for everyone in the eLearning community by contacting us with your improvements, examples and suggestions.