2.2. Assurer un contraste suffisant entre les éléments graphiques informatifs et interactifs avec leur arrière-plan

Le contraste des éléments graphiques informatifs et interactifs par rapport à leur arrière-plan doit être suffisant.

Cela concerne notamment :

  • Les pictogrammes informatifs.
  • Les pictogrammes interactifs seuls, lorsqu’ils ne sont pas accompagnés d’un texte.
  • Les champs de formulaire.

Rapports de contraste minimum

Le rapport de contraste minimum à atteindre entre les éléments graphiques informatifs/interactifs et la couleur d’arrière-plan est de 3.

Remarque

Pour tester le rapport de contraste, utiliser par exemple l’outil Colour Contrast Analyser.

Boutons d'impression et d'agrandissement de taille de texte, avec un ratio de contraste de 6:1
Exemples de pictogrammes interactifs suffisamment contrastés.
Pictogramme "Marche" (gris foncé) indiquant 2 minutes et 111 mètres, avec un ratio de contraste de 5,7:1
Exemple de pictogramme informatif suffisamment contrasté.
2 cases à cocher, avec un contour et un état coché indiqué en bleu (#395CA6) sur fond blanc. Ratio de contraste de 6.5:1
Exemples de cases à cocher suffisamment contrastées.
Champ de saisi texte, contour gris (#DDDDDD) sur fond blanc, ratio contraste de 1.4:1
Exemple de champ de texte insuffisamment contrasté.
Même champ de saisi texte, contour bleu (#00689E) sur fond blanc, ratio contraste de 6:1
Exemple de champ de texte suffisamment contrasté.

Charte graphique alternative

S’il n’est pas envisageable d’optimiser les contrastes par défaut, alors une charte graphique alternative suffisamment contrastée doit être proposée.

Commentaires

Mises à jour

06/03/2025
Suppression du terme « onglet » de la section « Cela concerne également »

Haut de page