2.2. Make sure that there is sufficient contrast between informative and interactive graphic elements and the background

The contrast between informative and interactive graphic elements and the background must be sufficient.

It includes, in particular:

  • Informative pictograms.
  • Interactive pictograms alone, without label.
  • Form fields.
  • Tabs.

Minimum contrast ratio

The minimum contrast ratio to reach between the informative/interactive graphic elements and the background color is of 3.

Note

To test the contrast ratio, use, for example, the Colour Contrast Analyser tool.

Print and text size magnification buttons, with a contrast ratio of 6:1
Examples of interactive pictograms with sufficient contrast.
"Walk" pictogram (dark gray) indicating 2 minutes and 111 meters, with a contrast ratio of 5.7:1
Example of an informative pictogram with sufficient contrast.
2 checkboxes, with an outline and a checked state indicated in blue (#395CA6) on a white background. 6.5:1 contrast ratio
Examples of sufficiently contrasted checkboxes.
Text input field, grey outline (#DDDDDD) on white background, contrast ratio 1.4:1
Example of a text field with insufficient contrast.
Same text input field, blue outline (#00689E) on white background, contrast ratio 6:1
Example of a text field with sufficient contrast.

Alternative style guidelines

If it is not practical to optimize the contrast, then sufficiently contrasted alternative style guidelines must be provided.

Comments

Back to top