Contrast (minimum)

In the WebAIM Million 2024 survey Opens in new window, they found that 81% of home pages failed this criterion. The criterion states:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Text that is part of a logo or brand name has no contrast requirement.

Why is colour contrast important?

The vast majority of features that help disabled people, also make life easier for everyone. Colour contrast is definitely one of these. For people with low vision or colour blindness, having sufficient contrast between the text and the background can make the difference between being able to see it and not. However, it also helps anyone who is viewing content in bright sunlight or other glary conditions.

What is colour contrast?

Colour contrast is the difference between the foreground colour (usually the text) and the background colour. If the two colours are quite similar, they will have lower contrast than two completely different colours.

Colour contrast is measured as a ratio of the relative luminance of the two colours. This is measured using the RGB codesRGB stands for Red, Green, Blue. The codes are the amount of that coloured light, from 0 to 255, that makes up the overall colour. for each colour.

If you are interested in the calculations of relative luminance, you can read about them on the W3 definitions page Opens in new window.

How to check colour contrast

The easiest way to check the contrast between your text and the background, is to use a free online contrast checker, such as the WebAIM contrast checker Opens in new window.

If you know the hexadecimal colour code for your two colours, the easiest way is to enter these in the tool and then read off the results. If you don't know the hexadecimal codes, by selecting the colour picker (the long coloured bar), you can enter the RGB codes or use an eye dropper tool.

Understanding the results

To pass this success criterion, you only need to look at the AA level results. The results are easy to interpret because the tools gives a pass/fail reading. The only question is around normal and large text.

Text sizes
Font size Normal text Large text
Points below 18 18 and above
Points (bold) below 14 14 and above
Pixels below 24 24 and above
Pixels (bold) below 18.66 18.66 and above