{"id":5992,"date":"2025-11-24T14:03:50","date_gmt":"2025-11-24T14:03:50","guid":{"rendered":"https:\/\/blogs.cardiff.ac.uk\/LTAcademy\/?p=5992"},"modified":"2025-11-24T14:03:50","modified_gmt":"2025-11-24T14:03:50","slug":"not-just-pretty-colours-using-colour-and-contrast-inclusively","status":"publish","type":"post","link":"https:\/\/blogs.cardiff.ac.uk\/LTAcademy\/not-just-pretty-colours-using-colour-and-contrast-inclusively\/","title":{"rendered":"Not just pretty colours: Using colour and contrast inclusively"},"content":{"rendered":"

Written by Alex Stewart and Heather Pennington from the Learning and Teaching Academy<\/strong><\/p>\n

Following our recent blog on accessible fonts and text sizes \u2018Don\u2019t skip the small print: Tips for accessible fonts and text sizes\u2019<\/a>, this post focuses on another vital element of digital accessibility: colour and contrast.<\/p>\n

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 \u2013 they\u2019re essential for access.<\/p>\n

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.<\/p>\n

Use high contrast combinations<\/h4>\n

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

In addition to ensuring good contrast, be mindful of how colour combinations affect users with dyslexia or visual processing differences. The \u00a0British Dyslexia Association’s style guide<\/a> 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 \u2013 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.<\/p>\n

Don\u2019t rely on colour alone<\/h4>\n

If you use colour to convey meaning (e.g. red for \u2018stop\u2019, green for \u2018go\u2019), 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.<\/p>\n

The Colour Blind Awareness<\/em> organisation has some useful information and material for educators and those supporting student experiences. Click here to learn more.<\/a><\/p>\n

Test your designs<\/h4>\n

You can use tools like the free WebAIM’s Colour Contrast Checker<\/a> to test whether your text meets WCAG contrast standards.<\/p>\n

Quick colour contrast checklist:<\/h4>\n