Comment utiliser Vérificateur de contraste
- 1
Saisissez deux couleurs
Saisissez la couleur du texte et la couleur d’arrière-plan en HEX, rgb(), hsl() ou oklch(), ou ouvrez la pastille ronde pour en choisir une.
- 2
Lisez le verdict
Le ratio et cinq lignes Réussi ou Échec indiquent les niveaux AA et AAA pour le texte normal et le grand texte, ainsi que la règle des 3:1 pour les icônes et les bordures.
- 3
Appliquez une correction
Si un niveau est en échec, utilisez le texte ou l’arrière-plan plus sombre ou plus clair le plus proche qui réussit, puis copiez la nouvelle valeur.
Limites et Pro
Gratuit et illimité : autant de vérifications que vous voulez, 5 critères WCAG 2.2 par couple, 2 corrections suggérées par niveau en échec et une grille de 7 couleurs maximum.
À propos de Vérificateur de contraste
Ce vérificateur de contraste mesure l’écart de luminosité entre deux couleurs grâce à la formule de luminance relative des WCAG 2.2, le même calcul que celui des audits d’accessibilité des navigateurs et des plugins de design. Le résultat est un ratio compris entre 1:1 (couleurs identiques) et 21:1 (noir sur blanc). Le critère de succès 1.4.3 exige 4,5:1 pour le texte courant et 3:1 pour le grand texte au niveau AA ; le critère 1.4.6 relève ces seuils à 7:1 et 4,5:1 pour le niveau AAA ; le critère 1.4.11 demande 3:1 pour les éléments non textuels porteurs de sens, comme les indicateurs de focus, les contours de champs et les lignes de graphiques.
Un exemple en direct affiche les deux tailles de texte, un bouton à contour et une icône avec vos couleurs, pour juger la lisibilité en plus du chiffre. Les ratios sont tronqués à deux décimales plutôt qu’arrondis, car un couple à 4,496:1 ne satisfait pas une exigence de 4,5:1. Quand un niveau échoue, l’outil fait varier la luminosité OKLCH d’une couleur en conservant sa teinte et sa chroma, puis propose la valeur la plus proche qui réussit, pour le texte et pour l’arrière-plan séparément.
L’outil s’adresse aux couleurs unies. Il ne peut pas évaluer un texte sur une photo ou un dégradé, la transparence, le rendu de l’épaisseur des polices sur un écran donné, ni la méthode APCA, plus récente et envisagée pour les WCAG 3. Considérez donc une réussite comme un minimum et testez aussi sur de vrais écrans.
Confidentialité
Les deux couleurs restent dans cet onglet : le ratio, les vérifications Réussi et Échec et les corrections suggérées sont calculés par votre navigateur, et aucune valeur de couleur n’est envoyée à un serveur ni enregistrée.