2.2. Make sure that there is sufficient contrast between the content and the background

The contrast between the text and the background must be sufficient.

This applies to all texts (“pure”, embedded in images, videos, etc.).

Minimum contrast ratio

The minimum contrast ratio required for text is 4.5 with the background colour.

Note

The kind of font used has no impact on the contrast ratios to be reached.
Text size and weight can allow for a lower contrast ratio to be acceptable, but we strongly recommend always meeting the 4.5 contrast ratio for text. For more information, refer to criterion 1.4.3 in WCAG.

Colour Contrast Analyser

To test the contrast, you could use a tool such as Colour Contrast Analyser, which is freely available for Windows and MacOS.

This tool allows you to manually enter colors using their hexadecimal codes or select them using an eyedropper. Compliance results are displayed directly within the tool.

Screenshot, Colour Contrast Analyser, the measurement between foreground color (blue / #195EA7) and background color (gray / #FFFFFF) gives a contrast ratio of 6.6:1 — According to this tool, blue text on a gray background has a sufficient contrast ratio.

Screenshot, Colour Contrast Analyser, measurement between foreground color (red / #CB4C48) and background color (white / #FFFFFFFF) gives a contrast ratio of 4.5:1 — According to this tool, the menu entry “My Account” in white on a light red background has a sufficient contrast ratio.

Warning

Be careful when using gradients, transparency and background images.

Tips

The Chart contrast analysis grid allows you to automatically calculate the contrasts of several colours.
The Contrast-Finder tool can be used to find sufficiently contrasted color combinations.

Alternative style guidelines

If it is not practical to optimize the contrast, then you can create alternative style guidelines that offer sufficient contrast.

Alternative style guidelines do not necessarily push the contrast to the limits (for example, black on white, or white on black), but provide rules so that the association of colours is optimized satisfactorily.

Screen capture, caption below. — In this example, alternative style guidelines that are sufficiently contrasted (on the right capture) can be activated from the button “Accessibility” which opens a menu containing some accessibility parameters.

Comments

Updates

09 June 2022: Removal of the “Find More” section