Vérificateur de contraste de couleur WCAG
Entrez une couleur de premier plan (texte) et d'arrière-plan et obtenez le ratio de contraste WCAG 2.1 exact, avec des résultats réussite/échec pour AA et AAA, texte normal et grand, plus un aperçu en direct. Les couleurs peuvent être saisies en hex ou rgb(), ou choisies avec le sélecteur de couleur à côté de chaque champ.
Portez ce vieux whisky au juge blond qui fume
Exemple de texte de taille normale, à titre de comparaison.
Questions fréquentes
Comment le ratio de contraste est-il calculé ?
En utilisant la véritable formule de luminance relative WCAG 2.1 sur les canaux sRGB de chaque couleur, puis en comparant la luminance la plus claire et la plus sombre comme (L1 + 0,05) / (L2 + 0,05). Le résultat va de 1:1 (couleurs identiques) à 21:1 (noir pur sur blanc pur).
Quelle est la différence entre AA et AAA ?
AA est le niveau de conformité WCAG standard sur lequel se basent la plupart des exigences d'accessibilité (y compris de nombreuses normes légales) : 4,5:1 pour le texte normal, 3:1 pour le grand texte. AAA est un niveau plus strict et optionnel : 7:1 pour le texte normal, 4,5:1 pour le grand texte.
Qu'est-ce qui compte comme « grand texte » ?
WCAG définit le grand texte comme 18pt (24px) en graisse normale ou plus, ou 14pt (environ 18,66px) en gras ou plus. Le grand texte a une exigence de contraste plus basse car des traits plus grands et plus gras restent lisibles à un contraste plus faible.
Puis-je entrer les couleurs en RGB plutôt qu'en hex ?
Oui, les champs de premier plan et d'arrière-plan acceptent les formats hex (#3b82f6) ou rgb(59, 130, 246), ou vous pouvez utiliser le sélecteur de couleur à côté de chaque champ.