Accessibility tips: Use of colours

(This blog is part of the Look Again campaign and was originally posted on the Staff Portal)

Our latest article reveals why colour coding should be used with caution

Using colour is an effective way of making information visual, but it can also cause problems for some users.

In the second of our digital accessibility tips articles, we provide practical advice on using colour in a way that does not exclude users who are colour blind or experience other medical conditions that affect their vision.

This article is part of our Look Again campaign running this May, asking colleagues to take another look at digital content they create to ensure it is accessible to everyone.

What to remember

There are two main points to keep in mind when creating accessible content using colour:

1) Not using colour-coding as the only way to convey meaning.

2) Using sufficient colour contrast.

Colour-coding

People who are colourblind may be unable to perceive content differentiated only by colour, for example if correct or incorrect answers to a question are indicated by writing them in red or green.

The free online Coblis Color Blindness Simulator reveals how certain content is viewed by people with different conditions.

Use the slider on the image to reveal how someone with colour blindness might see the information. Please note, this interactive element is not fully accessible to keyboard users. An alternative text description is provided.

Text alternative for the slider: The first image shows a multiple choice question with the correct answer in green text and incorrect answers in red text. When the slider is moved, the second image shows how the answers might all appear grey to someone with colour blindness.

What can I do?

Instead of using just colour use a symbol or texture/pattern as well to differentiate content. For example you could use a * symbol to indicate the correct answer.
Traffic light systems can be supplemented with symbols, as our own Digital Technology Services (DTS) team has done on its Status Page.
If you’ve used colour in a Microsoft Word document, check it’s accessible by selecting Start > Settings > Accessibility > Colour filters and select Grayscale on the Colour filter switch.

Colour contrast

Strong colour contrast between text and background helps everyone, but is particularly important for those with vision deficiencies.

Some medical conditions can also make black text on white backgrounds appear blurry.

Demonstrating contast issue with background and foreground black text shown over a dark background image with insufficient contrast to distinguish letters Demonstrating how to fix a contast issue with background and foreground black text shown over a light colour strip on a dark background image with sufficient colour contrast to distinguish letters

What can I do?

Make sure to use dark text on a light background, or vice versa. The free online contrast checker tool by WebAIM is useful for choosing an accessible colour combination.
Use a cream coloured background for PowerPoint presentation slides. Download a University template in standard or widescreen format.

Visit the accessible use of colour page on the Digital Accessibility webpages for more advice.