Contrast (minimum)

In the WebAIM Million 2024 survey , 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.

Incidental

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.

Logotypes

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 .

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 .

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.