Vérificateur de Contraste des Couleurs
Le rapport de contraste WCAG entre deux couleurs, et s'il passe AA ou AAA à la taille de texte utilisée.
Résultats
Ce que fait cet outil
Qu'un texte soit lisible n'est pas affaire de goût ; cela a un chiffre, et ce chiffre est inscrit dans la loi sur l'accessibilité d'un nombre croissant de pays. Le rapport de contraste WCAG va de 1 pour 1, avec deux couleurs identiques, jusqu'à 21 pour 1, avec du noir sur blanc. Saisissez vos deux couleurs et la taille à laquelle vous les utilisez, et cette page vous donne le rapport et le verdict simple — y compris si la taille compte comme grand texte, ce qui change le seuil.
Formule
WCAG 2: luminance = 0,2126 R + 0,7152 G + 0,0722 B après de la rampe; rapport = (claire + 0,05) ÷ (foncée + 0,05)
Variables
| Symbole | Signification | Unité |
|---|---|---|
foreground | Couleur du texte | — |
background | Couleur de fond | — |
font_size | Taille du texte | px |
bold | Gras | — |
OUT | Rapport de contraste | :1 |
LV | Niveau WCAG atteint | — |
AA | Passe AA | — |
A3 | Passe AAA | — |
GR | Suffit pour icônes et bordures | — |
LG | Compte comme grand texte | — |
NE | Nécessaire pour AA à cette taille | :1 |
BT | Meilleure couleur de texte sur ce fond | — |
Exemple résolu
- Couleur du texte#5a5f6b
- Couleur de fond#fdfcf8
- Taille du texte16 px
- Grasno
- Rapport de contraste6,23 :1
- Niveau WCAG atteintAA — l'exigence habituelle
- Passe AAOui
- Passe AAANon
- Suffit pour icônes et borduresOui
- Compte comme grand texteNon
- Nécessaire pour AA à cette taille4,5 :1
- Meilleure couleur de texte sur ce fond#000000
Limites
- Pour un travail devant respecter une norme ou être validé, vérifiez le résultat au regard du règlement applicable et faites-le relire par un ingénieur qualifié.
Questions fréquentes
Pourquoi la taille du texte change-t-elle la réponse ?
Parce que les grandes lettres ont besoin de moins de contraste pour rester lisibles — il y a simplement plus de trait à saisir pour l'œil. Le WCAG place la limite à 18 points, soit 24 pixels, ou à 14 points (environ 18,7 pixels) quand le texte est en gras. Au-dessus de cette limite, AA demande 3 pour 1 au lieu de 4,5, et AAA 4,5 au lieu de 7. La même paire de couleurs peut donc passer pour un titre et échouer pour le paragraphe en dessous.
Pourquoi le gris sur blanc frôle-t-il si souvent la limite ?
Parce que le gris moyen vers lequel les designers vont d'instinct — #777 — donne 4,48 sur blanc, et le seuil est 4,5. Il paraît très bien sur un bon écran dans une pièce calme et disparaît sur un téléphone en plein jour, précisément la situation que le seuil existe pour protéger. Assombrir d'un cran, jusqu'à #767676, est la correction habituelle et ne coûte rien visuellement.