Accessible Colour and Contrast

Colour can be a powerful way to communicate your message. However, not everyone perceives colour in the same way, so it’s important to use colour carefully and have other methods so everyone can access your content.

This article details the following ways to make your use of colour accessible:

• Keep colour contrast high
• Avoid tricky colour combinations
• Use non-colour based indicators for meaning
• Know how to use tools to spot and fix the issues

Keep colour contrast high

It’s important to keep text/visual elements distinct from the background. The extent to which content has “enough” colour contrast has been set by the Web Content Accessibility Guidelines (WCAG) and can be automatically identified by different tools. In general, the simplest thing to do is regardless of how different the foreground/background colours are:

• for dark text, make the background lighter.
• for light text, make the background darker.

This example fails WCAG2.1 AA standards, as colour contrast between the text and background is too low.

This text passes WCAG 2.1 AAA standards, as for dark text, it is best to make the background as light as possible.

Increasing the text or element size, can also support users being able to distinguish colour contrast.

Normally it is best to just use the automatic accessibility checkers in Microsoft Office and the Accessibility+ Toolkit in Moodle.

Avoid tricky colour combinations

It’s useful to avoid certain colour combinations as some users may not be able to distinguish between these colours.

When using colour in Microsoft Office, use the default “Theme Colors” palette rather than the “Standard Colors”. To find accessible templates, pick one of Microsoft’s sample accessible templates or go to File > New and search for “accessible”.

Use non-colour based indicators for meaning

It’s useful and common to use colour for meaning: for example being “in the black/red” in accountancy or to distinguish between different data series in a chart. However it is important to use other strategies alongside colour to support people with differing colour perception to add a layer of redunancy.

Accessible strategies that can work alongside colour are:

• additional text labels. For example, you’ve created a mindmap that has been colour coded by theme. To make it accessible for someone who can’t percieve colour, you’ve add theme label in brackets after after each mindmap item.
• additional visual elements. For example, you might choose to use simple icons to denote categories alongside other colour coding strategies.
• patterned/textured visual elements. For example, for the chart you are making you use patterns/line styles to represent data types, in addtion to colour to distinguish between data series.

The default charts created in Microsoft Office are inaccessible and reliant on colour perception – see our Accessible Figures Guidance for instructions on how to create accessible bar charts, pie charts, line/scatter plots in Excel.

How can I spot and fix these issues?

Automatic colour contrast checkers

• Use the Microsoft Accessibility Checker to identify text colour contrast issues on Office documents such as PowerPoint slides.
• Use the Accessibility Toolkit+ in Moodle to find colour contrast issues.
• For webpages (including HTML bookdown outputs) you can use the Accessibility Insights for Web browser extension for Chrome/Edge (this also checks for other accessibility issues).

It is important to understand that automatic checkers can pick up most colour contrast issues between background and foreground text. However, they cannnot spot if a design is using colour in an inaccessible way (e.g. simply colour coding text green or red) and for this reason it’s important to consider some simple manual checks.

Manual checks

Rather than being an expert in colour perception, a useful measure of colour accessibility is the Black and White test. Think about how the material would present if it was printed in black and white – would you still be able to discern the meaning?

It’s easy to get your work to preview in greyscale simulate how your content might appear if you don’t have colour vision and where you rely on colour.

• In Powerpoint, under the Accessibility ribbon you can use the Inspect without Color
• In Windows 11/10, go to the Start menu > Adjust Colour Filters > Enable. Then scan your content with greyscale/specific colour blindness filter.
• On Mac, select System Preferences > Accessibility > Display > Color Filters. Enable color filters then type “Grayscale”.

Learn more about accessible use of colour

Check out the video below to understand the challenges and experiences students face when dealing with content that has color and contrast issues.