Colour contrast

Published on: 12 March 2025

Abstract illustration style of a person sat on a circle of colour, surrounded by lots of other little circles of colour

A common problem

Have you ever squinted at fluorescent yellow Comic Sans on a Powerpoint presentation? I hope you haven't been subjected to this, but the chances are, that you have experienced poor colour contrast, in your every day life, at some point.

Despite advances in the user interface design space, colour contrast is one of the most common digital accessibility issues, according to WebAIM.

In fact, based on WebAIM's statistics, you could say that colour contrast is criminal number one, on the most wanted list of accessibility fails.

81%, of the million sites that they audited, using automated checks, had colour contrast issues on their home pages.

This hasn't reduced much in the last 5 years.

Poor contrast can impact a number of people

You could theorise that combining the figures, that poor colour contrast could impact around 7% of the UK. Yet this is ignoring situational and temporary impacts, which could equate to a much higher percentage.

WCAG and colour contrast

Different button colour, font size and font weight combinations, ranging from uncompliant to AAA
You can meet contrast levels through a combination of font size, font weight and colour combinations.

Thankfully, there's plenty of freely available tools that allow you to check different colour combinations.

Contrast issues on graphics

If you have a graphic, whereby the contrast between the text on the graphic and the background, this would still be a WCAG fail.

The rule states 'The visual presentation of text and images of text...'.

W3C also explitly call out this example as a fail in their guidance documentation about the rule.

Contrast checking tools

Figma plugins

Automated browser scanning

You can run automated scans in a browser to find errors.

Mass scanning and monitoring

There are tools which will let you monitor 100s or 1000s of pages in bulk. Colour contrast, being one of the potential automated errors that they may pick up.

Limitations of automated tools

Sometimes automated tools don't pick up on text over an image background that may fail contrast checks.

Tools won't pick up on graphic content, where text is part of an image.

Development and testing stages

Work automated checks into development and testing lifecycles to add additional safeguards. Common frameworks like Axe or Lighthouse can be integrated into source control and testing processes, as well as the browser checks that anyone can do.

When reviewing designs, speed up your review process by using the tools that can scan whole frames or files.

Native app testing

Do's and don'ts

The evolution of contrast definitions

The Advanced Perceptual Contrast Algorithm (APCA) may replace the current method and definitions of comparing contrasts in future iterations of WCAG but has not yet been fully validated or confirmed by W3C.

Therefore, until W3C fully accept it into the WCAG guidelines, the safest bet is still go by the current definitions, outlined by WCAG.

However, this is an emerging space and will be great to see if advancements are made in this space.

Conclusion

Everyone perceives colours differently and it's also hard to account for every setting a user may be in.

The key is trying to strike a happy balance and allowing browser, device and assistive technology customisation, so that users can adjust the colours to their unique needs, where needed.

Whilst there are mixed views on the impact of dark mode for instance, it can benefit certain users, in certain situations. So enabling things like dark mode, for the users who do feel that they benefit from it, is beneficial.

One colour contrast issue can lead to 100s or 1000s of error instances, when running automated tools. Therefore, it is easy to imagine that this could impact search engine algorithms or increase various legal and legislative risks.

Colour contrast is a relatively easy issue to resolve and has a broad user benefit.

Sources and further reading

Sources

Further reading