3.1. Make sure that there is sufficient contrast between the content and the background or propose an alternative with contrast

The contrast between the colors and the background must be sufficient for all items present (text, images, videos, etc.).

Note

It is also important to provide a sufficient contrast between an informational icon (not completed with text) and the background colour.

Examples of sufficiently contrasted pictograms.

Minimum contrast ratio for a AA WCAG 2.0 compliance

The minimum contrast ratio to reach the AA level requirement of WCAG 2.0 depends on the font weight.

For a non-bold text

For a bold text

Note

The kind of font used does not impact the ratios.

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.

According to this tool, white texts on a pink background
have a sufficient contrast ratio for AA level compliance.
Still according to this tool the black title “News” on a yellow background
have a sufficient contrast ratio for AA and AAA level compliance

Warning

Be careful when using shading, color gradients or patterns as background for content.

Tip

  • The Contrast-Finder tool can be used to find sufficiently contrasted color combinations :
  • The Color Safe tool can be used to generate sufficiently contrasted color palettes.
  • A11y Color Palette can be used to automatically calculate the contrast of several colors.

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.

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