Vérificateur de contraste des couleurs
Vérifiez si un texte sera réellement lisible, selon la norme d'accessibilité.
- Fonctionne dans votre navigateur — votre texte n'est jamais envoyé nulle part
- Sans inscription, sans quota, gratuit et utilisable aussi souvent que vous le souhaitez
Comment ça marche
Le texte gris clair sur fond blanc est l'échec d'accessibilité le plus courant sur le web, et il est tout à fait évitable. Les directives d'accessibilité définissent le contraste comme un rapport précis, si bien que savoir si une association passe est une affaire d'arithmétique et non d'opinion.
Comment le rapport est calculé
La luminance relative de chaque couleur est calculée comme le précisent les directives, avec la correction gamma appliquée canal par canal, et le rapport est établi entre la plus claire et la plus sombre. Le résultat correspond à ce que rapportera un audit d'accessibilité, car c'est la même formule.
Les seuils
Le texte normal demande 4,5:1 pour AA et 7:1 pour AAA. Le grand texte, en gros 24px, ou 18,7px s'il est en gras, ne demande que 3:1 pour AA et 4,5:1 pour AAA. Les composants d'interface et les éléments graphiques porteurs de sens demandent 3:1. AA est ce qu'exigent la plupart des organisations et la plupart des législations.
Pourquoi le grand texte est moins exigeant
Les lettres plus grandes ont plus de pixels dans chaque trait, donc elles restent lisibles à un contraste plus faible. C'est pourquoi un titre peut employer un gris plus clair que le texte courant.
Ce que le rapport ne mesure pas
Il ne dit rien du daltonisme, qui est une vérification distincte, ni de la taille suffisante du texte ou de la lisibilité de la police. Un rapport réussi est un plancher, pas la preuve d'un design lisible.
Vérificateur de contraste des couleurs : questions
Quel rapport de contraste me faut-il§?
4,5:1 pour le texte normal au niveau AA, 3:1 pour le grand texte. Le niveau AAA les porte à 7:1 et 4,5:1.
Qu'est-ce qui compte comme grand texte§?
En gros, 24px et plus, ou 18,7px et plus s'il est en gras.
Réussir le test veut-il dire que mon design est accessible§?
Non. Le contraste est une exigence parmi beaucoup d'autres§; il ne dit rien du daltonisme, de la taille du texte ni de la lisibilité.