Accessibility tips: Using colours

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

The image shows a multiple choice question with the correct answer in green text and incorrect answers in red text. 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.

Move the slider on the image to show how sufficient colour contrast makes the text easier to read. (Please note, this interactive element is not fully accessible to keyboard users. An alternative text description is provided.)

The image shows black text over a dark background, which is very hard to read. The second image shows a light colour strip behind the black text, making it far easier to read.

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.