1.4.1 Use of Colour - ELA Hub

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.

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

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 © [2020] World Wide Web Consortium, (MIT, ERCIMKeio, Beihang)


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

Back to top