Not just pretty colours: Using colour and contrast inclusively

Written by Alex Stewart and Heather Pennington from the Learning and Teaching Academy

Following our recent blog on accessible fonts and text sizes ‘Don’t skip the small print: Tips for accessible fonts and text sizes’, this post focuses on another vital element of digital accessibility: colour and contrast.

Have you ever struggled to read pale text on a bright screen? For many users, particularly those with visual impairments or specific accessibility needs, colour and contrast are more than just design choices – they’re essential for access.

Many staff and students at Cardiff University rely on screen readers, magnifiers, or customised visual settings to access digital content. For others, including those with visual impairments or colour vision deficiency, good contrast and meaningful colour use can make the difference between fully engaging with your materials or missing key information.

Use high contrast combinations

To improve readability, ensure strong contrast between text and background. Dark text on a light background – such as black on cream or navy on pale grey – is generally most effective. Avoid using light-coloured text on white backgrounds or placing text over busy images or gradients.

In addition to ensuring good contrast, be mindful of how colour combinations affect users with dyslexia or visual processing differences. The  British Dyslexia Association’s style guide recommends avoiding pure white backgrounds, which can cause glare. Instead, opt for soft pastel shades, off-white, cream, or light grey. Use dark text on these lighter backgrounds – for example, dark blue on pale yellow, or dark brown on cream. Try to avoid colour pairings like green and red or pink, which can be problematic for both dyslexic users and those with colour vision deficiency. Where possible, give users control to customise colours using accessible formats or tools. These simple changes can significantly reduce visual stress and improve legibility for many learners.

Don’t rely on colour alone

If you use colour to convey meaning (e.g. red for ‘stop’, green for ‘go’), always include a secondary indicator, such as icons, text, or labels. This supports users with colour perception deficiencies and those who customise their screen display settings.

The Colour Blind Awareness organisation has some useful information and material for educators and those supporting student experiences. Click here to learn more.

Test your designs

You can use tools like the free WebAIM’s Colour Contrast Checker to test whether your text meets WCAG contrast standards.

Quick colour contrast checklist:

• Is the text clearly legible on the background?
• Are you using more than colour alone to convey meaning?
• Have you tested with accessibility tools?

Find out more

Cardiff University’s Digital Accessibility Guidance offers practical guidance, downloadable templates, and resources to help you meet accessibility regulations and support all learners.

Taking a few minutes to review your use of colour can go a long way in creating inclusive learning environments.

If you need more support or have requests for new blogs, please contact LTAcademy@cardiff.ac.uk.