Comment l'utiliser
- Définissez la couleur d'arrière-plan et la couleur du texte avec les sélecteurs de couleur ou en saisissant des codes HEX.
- Lisez le rapport de contraste affiché sous forme de nombre, par exemple 4.50:1, et regardez la carte d'aperçu.
- Consultez les badges PASS ou FAIL pour le texte normal AA, le grand texte AA et le texte normal AAA.
Le vérificateur calcule le rapport de contraste comme le définissent les Web Content Accessibility Guidelines. Chaque couleur est convertie en luminance relative avec la formule sRGB, et le rapport est la luminance la plus claire plus 0,05, divisée par la luminance la plus foncée plus 0,05. Le résultat s'affiche avec deux décimales, de 1:1 pour des couleurs identiques jusqu'à 21:1 pour du noir sur blanc. Les couleurs par défaut sont le blanc et le noir.
Trois résultats sont affichés. Le texte normal au niveau AA exige un rapport d'au moins 4,5. Le grand texte au niveau AA exige au moins 3. Le texte normal au niveau AAA exige au moins 7. Chacun est marqué PASS ou FAIL. Le rapport lui-même est également codé par couleur. Selon les WCAG, un grand texte correspond à environ 18 points en graisse normale ou 14 points en gras ; n'utilisez donc le résultat du grand texte que si votre texte a cette taille.
Une carte d'aperçu utilise vos deux couleurs, avec un titre et une ligne de texte d'exemple, afin que vous puissiez juger les couleurs autant que le chiffre. Un score réussi ne garantit pas à lui seul une bonne lisibilité, car la graisse de la police, la taille et l'environnement comptent aussi.
Les couleurs doivent être saisies sous forme de codes HEX à 6 chiffres. Le calcul est effectué dans votre navigateur.
FAQ
Quel rapport me faut-il ?
Pour WCAG AA, le texte normal exige 4,5:1 et le grand texte 3:1. Pour AAA, le texte normal exige 7:1. L'outil affiche le résultat pour chacun.
Qu'est-ce qui compte comme grand texte ?
Selon les WCAG, un texte d'environ 18 points ou plus, ou de 14 points en gras ou plus.
Quelle couleur va où ?
L'outil considère une couleur comme l'arrière-plan et l'autre comme le texte, mais le rapport est le même dans les deux cas.
Pourquoi mon code HEX court ne fonctionne-t-il pas ?
Saisissez la forme complète à 6 chiffres, par exemple #333333 plutôt que #333.
Vérifie-t-il les éléments non textuels ?
Il ne donne que les seuils pour le texte. Le rapport est affiché, vous pouvez donc le comparer vous-même à la recommandation de 3:1 pour les composants d'interface.