Making Colour and Contrast Accessible

Published on: 07/11/2023 · Last updated on: 17/04/2026

What to do

• 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

Why do it?

Colour can be a powerful way to communicate information, but not everyone perceives colour in the same way. This guide explains how to use colour and contrast so your content is clear, inclusive, and accessible to all students.

Keep colour contrast high

To be accessible, text and visual elements must clearly stand out from their background. This can support people with vision differences and also visibility on different devices (e.g. projector screen in bright room).

A simple rule:

• Dark text → light background
• Light text → dark background

Increasing the text or element size, can also support users being able to distinguish colour contrast. Minimum contrast levels are defined by the Web Content Accessibility Guidelines (WCAG). Most colour contrast issues can be identified using automatic accessibility checkers.

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.

Avoid tricky colour combinations

Some colour combinations are difficult to distinguish for people with colour vision deficiencies (for example, red/green or blue/purple).

To reduce this risk in Microsoft Office:

• Use an accessible University template or one of Microsoft’s built-in accessible templates (File > New > search “accessible”)
• On the font/background colour picker, make sure to toggle “High-contrast only” and pick the default Theme Colours, not Standard Colours

Use non-colour based indicators for meaning

Colour should never be the only way information is conveyed. Always provide an additional cue.

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 add a layer of redundancy to support people with differing colour perception.

Useful tip: if the meaning is lost when viewed in black and white, it is not accessible and a non-colour based indicator is needed

Accessible strategies that can work alongside colour are:

• 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 perceive colour, you add theme labels in brackets after each mindmap item.
• icons or symbols. For example, you might choose to use simple icons to denote categories alongside other colour coding strategies.
• patterns/textures and line styles. For example, in charts se dashed lines or textures as well as 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 (PowerPoint, Word, Excel).
• 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 cannot 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

Automatic tools can’t detect when colour alone is used to convey meaning. A simple manual test:

• View your content in greyscale.
• If the meaning is unclear, revise the design.

Check your work in greyscale

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