À propos de l’outil : Vérificateur de contraste des couleurs
Un texte qui ne se détache pas suffisamment de son arrière-plan est difficile à lire pour les personnes malvoyantes ou daltoniennes, pour les personnes âgées et pour quiconque lit sur son téléphone en plein soleil. Les Règles pour l’accessibilité des contenus web (WCAG) définissent des rapports de contraste minimaux entre le texte et l’arrière-plan : 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA, et 7:1 et 4,5:1 au niveau AAA, plus exigeant. Cet outil calcule le rapport exact pour deux couleurs quelconques et indique les niveaux qu’elles respectent, avec un aperçu en direct.
Mode d’emploi
- Choisissez la couleur du texte (premier plan) et la couleur d’arrière-plan avec les sélecteurs, ou saisissez des valeurs HEX, RGB ou HSL.
- Lisez le rapport de contraste, de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
- Vérifiez quels niveaux WCAG sont respectés. Si un niveau échoue, assombrissez ou éclaircissez l’une des couleurs jusqu’à ce qu’il soit respecté.
- Utilisez le bouton d’inversion pour tester les couleurs dans l’autre sens.
Questions fréquentes
Qu’est-ce qu’un grand texte ?
Les WCAG définissent un grand texte comme un texte d’au moins 18 points (24 pixels CSS) en graisse normale, ou d’au moins 14 points (environ 18,7 pixels CSS) en gras.
Quel niveau mon site web doit-il atteindre ?
Le niveau AA est l’objectif fixé par la plupart des lois et politiques d’accessibilité dans le monde, dont l’Acte européen sur l’accessibilité (European Accessibility Act) et l’ADA aux États-Unis. Le niveau AAA est recommandé, dans la mesure du possible, pour les textes de lecture longs.
En quoi consiste la vérification « Composants d’interface et graphiques » ?
Les WCAG 2.1 et versions ultérieures exigent un contraste de 3:1 pour les parties visibles des commandes, comme les bordures des champs de saisie et les icônes, ainsi que pour les graphiques porteurs de sens, par rapport aux couleurs adjacentes.