Vérificateur de contraste des couleurs
Mesurez le rapport de contraste WCAG de n'importe quelle paire texte et fond, et trouvez une nuance conforme quand il est insuffisant.
Vérifier le contraste des couleurs selon les WCAG
Un texte trop peu contrasté est l'un des défauts d'accessibilité les plus courants sur le web. Il gêne les personnes malvoyantes ou dont la perception des couleurs diffère, mais aussi quiconque lit sur son téléphone en plein soleil. Les règles pour l'accessibilité des contenus web (WCAG) transforment « suffisamment lisible » en un nombre : le rapport de contraste.
Cette page ouvre le convertisseur de couleurs sur son onglet Contraste.
Les seuils WCAG en un coup d'œil
| Ce que vous vérifiez | AA | AAA |
|---|---|---|
| Texte courant et libellés | 4,5:1 | 7:1 |
| Grand texte (24 px, ou 18,7 px en gras) | 3:1 | 4,5:1 |
| Icônes, bordures de champs, contours de focus et éléments de graphiques | 3:1 | — |
Le niveau AA est celui auquel se réfèrent la plupart des lois et des règles de marchés publics. Le niveau AAA est plus strict et mérite d'être visé pour la lecture de textes longs, mais il n'est pas attendu pour chaque élément d'un site.
Corriger une couleur qui échoue
Quand une paire est insuffisante, le vérificateur propose la nuance la plus proche de la même teinte qui atteint 4,5:1 sur votre fond : la couleur de marque reste reconnaissable et le texte devient lisible. Les corrections typiques consistent à assombrir une couleur de texte de 10 à 20 points de luminosité, ou à garder la couleur de marque pour les grands titres et les boutons tout en utilisant une variante plus foncée pour le petit texte.
Erreurs fréquentes
- Texte indicatif gris dans les champs, élégant en apparence mais très en dessous de 4,5:1.
- Texte blanc sur des couleurs de marque vives comme l'orange, le jaune ou le vert clair.
- Ne vérifier que le thème clair : le mode sombre demande sa propre vérification.
- Texte sur image : mesurez par rapport à la zone la plus claire sur laquelle le texte peut se trouver, ou ajoutez un voile.
La formule derrière le rapport
Chaque canal sRGB est ramené sur une échelle de 0 à 1 et linéarisé, puis combiné selon 0,2126 R + 0,7152 G + 0,0722 B pour obtenir la luminance relative. Le rapport vaut (L1 + 0,05) / (L2 + 0,05), L1 étant la couleur la plus claire. Le vert domine parce que l'œil y est le plus sensible, ce qui explique pourquoi du jaune sur blanc échoue aussi nettement. Pour préparer des couleurs avant le test, convertissez-les avec HEX en RGB ou ajustez leur luminosité avec HEX en HSL.