Colour contrast

There should be sufficient contrast between colours on all elements of the page, including pie charts, diagrams and images.

Contrast should be 3:1 for large text (18pt plain/regular text and higher, or 14pt bold text and higher), 4.5:1 for all other text. This applies even if text is overlaid on a visual and can be read programmatically (ie not part of the image itself).

A dedicated contrast checker can help you understand whether your text meets requirements. Tools such as Chrome/Firefox browser extensions and Microsoft Paint can help in determining colour values.

Alternatively, Colour Contrast Analyser is a free program that allows you to easily check contrast of anything you can see on your screen.

What and why: Poor contrast can make text hard to read and the relationship between elements hard to understand for many people, such as those with dyslexia or visual impairments.

Combining line styles and fill patterns with colour

In things like graphs and charts, applying line styles and fill patterns can make it easier to visually separate information alongside good colour contrast.

For example, a line graph that has a solid line, dotted line and dashed line as well as those lines being red, yellow and blue could be easier for a colour blind person to interpret because the line style is communicating the difference between them, not just the colour.

Accessible use of colour

Colleague Clare Gordon has created an extremely helpful overview of colour choice, Accessible use of colour for teaching materials, containing advice that applies to all kinds of content. Please consult this advice when using colour. Some of the key points are:

• Don't rely completely on colour.
• Use limited colour palettes where possible.
• Choose perceptually uniform colour maps.
• Check your colours before finalising your work.