2.1. 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, animations, etc.).

Minimum contrast ratio

The minimum contrast ratio to reach depends on the size and weight of the text.

Normal text

Big text

Note

The kind of font used has no impact on the contrast ratios to be reached.

Colour Contrast Analyser

To test the contrast, you could use, for example, the Colour Contrast Analyser tool for Windows and Mac OS, which you can download free.

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

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.

Find out more

Comments

Add a comment

Required fields are marked *.

Back to top