Vérificateur de contraste WCAG
Testez l’accessibilité de vos couleurs texte/fond.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Des couleurs lisibles par tous, vérifiées en deux clics
Près d’une personne sur douze perçoit mal certains contrastes. Les WCAG (Web Content Accessibility Guidelines) fixent des ratios minimaux entre texte et fond ; ce vérificateur les calcule en direct, avec la formule officielle de luminance relative, et affiche un aperçu réel de votre combinaison.
-
Choisissez vos deux couleurs
Au sélecteur ou en collant un code hexadécimal (#rrggbb ou #rgb).
-
Lisez le ratio
De 1:1 à 21:1, avec les quatre verdicts AA/AAA pour texte normal et grand texte.
-
Ajustez si besoin
Modifiez la clarté d’une des deux couleurs jusqu’à validation, en vous aidant de l’aperçu.
Les seuils WCAG en un tableau
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 |
| AAA (renforcé) | 7 : 1 | 4,5 : 1 |
| Composants d’interface (2.1) | 3 : 1 | 3 : 1 |
Le contraste se vérifie pour chaque paire texte/fond de votre interface — pensez aux états : liens survolés, boutons désactivés, placeholders et mode sombre.
Questions fréquentes
Qu’est-ce que le ratio de contraste ?
C’est le rapport entre la luminance de la couleur la plus claire et celle de la plus sombre, de 1:1 (identiques) à 21:1 (noir sur blanc). Les WCAG l’utilisent pour garantir la lisibilité du texte par tous, y compris les personnes malvoyantes.
Quels seuils faut-il atteindre ?
Niveau AA : 4,5:1 pour le texte normal, 3:1 pour le grand texte. Niveau AAA, plus exigeant : 7:1 et 4,5:1 respectivement. AA est le minimum légal dans de nombreux pays pour les services publics.
Qu’est-ce qu’un « grand texte » ?
Selon les WCAG : au moins 18 pt (24 px) en graisse normale, ou 14 pt (18,5 px) en gras. Les gros titres tolèrent donc un contraste plus faible que le corps de texte.
Le contraste concerne-t-il aussi les éléments non textuels ?
Oui : depuis WCAG 2.1, les composants d’interface (bordures de champs, icônes porteuses d’information, états de focus) doivent atteindre 3:1 avec leurs couleurs adjacentes (critère 1.4.11).
Mon ratio est insuffisant : comment le corriger ?
Foncez le texte ou éclaircissez le fond (ou inversement en thème sombre). Souvent, quelques crans de luminosité suffisent — gardez la même teinte et jouez sur la clarté pour préserver votre palette.