2.1. Assurer un contraste suffisant entre les textes et l’arrière-plan

Le contraste entre les textes et l’arrière-plan doit être suffisant.

Cela concerne l’ensemble des textes (« purs », incrustés dans des images, dans des animations, etc.).

Rapports de contraste minimum

Le rapport de contraste minimum à atteindre dépend de la taille et de la graisse des textes.

Texte normal

Grand texte

Remarque

La police de caractères utilisée n’a pas d’impact sur les rapports de contraste à atteindre.

Colour Contrast Analyser

Afin de tester les contrastes, utiliser par exemple l’outil Colour Contrast Analyser disponible en libre téléchargement.

Capture d'écran, Colour Contrast Analyser, la mesure entre la couleur de premier plan (bleu / #005DA8) et la couleur d'arrière plan (gris / #F0F0F0) donne un ratio de contraste de 5,9:1
D’après cet outil, les textes bleus sur fond gris possèdent un rapport de contraste suffisant.
Capture d'écran, Colour Contrast Analyser, la mesure entre la couleur de premier plan (rouge / #CB4C48) et la couleur d'arrière plan (blanc / #FFFFFF) donne un ratio de contraste de 4,5:1
Toujours d’après cet outil, l’entrée de menu « Mon compte » en blanc sur fond rouge pâle possède un rapport de contraste suffisant.

Attention

Utiliser avec vigilance les dégradés, la transparence et les images en arrière-plan.

Astuces

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.

Une charte graphique alternative n’est pas nécessairement une charte où les contrastes sont poussés à l’extrême (du type noir sur blanc ou blanc sur noir), mais une charte où les associations de couleurs sont suffisamment optimisées.

Capture d'écran, navigation du site Dialogue et Solidarité, un bouton permet d'augmenter le contraste.
Dans cet exemple, une charte graphique alternative suffisamment contrastée est activable depuis un bouton « Augmenter le contraste ».
Capture d'écran, Site Dialogue et Solidarité une fois les contrastes augmentés, les éléments de couleurs sont passés en gris foncé.
Une fois ce bouton « Augmenter le contraste » cliqué, il se transforme en un bouton « Diminuer le contraste ».

6 commentaires

  • Par Claire Bizingre, le 15 septembre 2015 à 13:10.

    Bonjour,

    Il est indiqué dans le critère de contraste « un texte non gras inférieur à 18 pt ».

    Pourquoi fixer 18pt et pourquoi indiquer l’unité pt ?

    On parle plutôt d’un pourcentage de 150% par rapport à taille de police par défaut (ou 1.5em). Même chose pour le texte en gras.

    Mais il y a peut-être une bonne raison qui m’échappe ?

    Merci pour cet éclairage !

    Répondre

  • Par claire bizingre, le 15 septembre 2015 à 13:19.

    Re !

    Comme outils, j’utilise aussi l’extension Firefox WCAG Contrast Checker même pour les maquettes.

    Je charge une image dans Firefox et j’utilise les pipettes de l’extension pour récupérer les couleurs du texte et du fond comme dans Color Contrat Analyser qui parfois fonctionne mal sur mon PC Windows 8.

    Répondre

    • Par Johan Ramon, le 21 septembre 2015 à 16:42.

      Bonjour Claire,

      Merci pour ce partage d’expérience.

      Nous venons d’ajouter l’extension Firefox « WCAG Contrast Checker » dans l’encart « Aller plus loin » de la fiche.

      Johan

      Répondre

  • Par sophie drouvroy, le 25 juillet 2016 à 10:02.

    Il y a aussi l’outil tota11y qui permet de localiser rapidement les couleurs qui ne sont pas contrastées comme il le faudrait, entre autres.

    http://khan.github.io/tota11y/

    ;-)

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page