1:1 à 21:1 · AA · AAA
Vérificateur de contraste
Du noir sur du blanc a un ratio de contraste WCAG de 21:1, le plus élevé possible, et du blanc sur #0060fd a 5.13:1. Saisissez une couleur de texte et un fond pour vérifier les vôtres.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Le ratio et les cinq vérifications se mettent à jour au fil de la saisie. Un ratio est tronqué à deux décimales, jamais arrondi à la hausse : 4.499 s’affiche donc 4.49:1 et échoue à la vérification de 4.5:1.
Scanned by 
NortonTM Safe Web
En bref
- Prix
- Sans frais
- Compte
- Aucun requis
- Envoi
- Sans objet — vous saisissez des couleurs, rien n’est envoyé
- Formule
- (luminance la plus claire + 0.05) ÷ (luminance la plus sombre + 0.05)
- Seuils
- AA 4.5:1 texte normal et 3:1 grand texte ; AAA 7:1 texte normal et 4.5:1 grand texte ; 3:1 pour les éléments d’interface
- Norme
- Définitions WCAG 2.2 de la luminance relative et du ratio de contraste
Ratios de contraste de couples connus
Ces lignes ont été produites par le même code que le vérificateur. Une coche signifie que le couple satisfait l’exigence ; une croix, qu’il ne la satisfait pas.
| Couleur du texte | Fond | Ratio | AA normal | AA grand | AAA normal | AAA grand | Éléments d’interface |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Vérification | Ratio minimal |
|---|---|
| AA, texte normal | 4.5:1 |
| AA, grand texte | 3:1 |
| AAA, texte normal | 7:1 |
| AAA, grand texte | 4.5:1 |
| AA, éléments d’interface et graphiques | 3:1 |
Comment vérifier un couple de couleurs
Saisissez les deux couleurs
Tapez la couleur du texte et celle du fond dans n’importe quelle notation CSS, ou utilisez les sélecteurs. Le bouton d’inversion les échange, ce qui est utile pour un texte clair sur fond sombre.
Lisez le ratio
Le ratio va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). L’exemple sous les champs montre le couple à 16 px et à 24 px, pour que vous jugiez le résultat à l’œil.
Consultez les cinq vérifications
Chaque tuile indique Réussi ou Échec pour une exigence WCAG : AA et AAA pour le texte normal, AA et AAA pour le grand texte, et AA pour les éléments d’interface. Si le texte normal échoue à AA, la page propose la couleur de texte la plus proche qui réussit.
Comment le ratio de contraste est calculé
Les WCAG mesurent le contraste par la luminance relative, la luminosité d’une couleur de 0 (noir) à 1 (blanc). Chaque canal rouge, vert et bleu est divisé par 255 ; une valeur jusqu’à 0.04045 est divisée par 12.92, et une valeur plus grande est élevée à une puissance : (valeur + 0.055) divisé par 1.055, puis à la puissance 2.4. La luminance vaut ensuite 0.2126 fois le rouge plus 0.7152 fois le vert plus 0.0722 fois le bleu, ce qui reflète la sensibilité de l’œil à chacun. Le ratio de contraste est la luminance la plus claire plus 0.05, divisée par la luminance la plus sombre plus 0.05.
Les WCAG 2 exigent au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA, et 7:1 et 4.5:1 au niveau AAA. Un grand texte fait au moins 18 points, soit 24 pixels CSS, ou au moins 14 points en gras, soit environ 18.66 pixels. Le critère de réussite 1.4.11 demande 3:1 pour les éléments d’interface et les graphiques qu’un lecteur doit voir, comme la bordure d’un champ ou la ligne d’un graphique. Le ratio est comparé à chaque seuil sans arrondi. Si une couleur est transparente, un fond transparent est posé sur du blanc et un texte transparent sur le fond avant la mesure. Cette page n’implémente que les WCAG 2.x ; elle ne calcule pas l’APCA, qui est envisagé pour une version ultérieure des recommandations.
Questions sur le contraste
Quel ratio de contraste les WCAG exigent-elles pour le texte ?
Au niveau AA, le texte normal exige au moins 4.5:1 et le grand texte au moins 3:1. Au niveau AAA, les valeurs sont 7:1 pour le texte normal et 4.5:1 pour le grand texte. Le ratio se mesure entre la couleur du texte et la couleur directement derrière.
Qu’est-ce qu’un grand texte ?
Les WCAG définissent un grand texte comme faisant au moins 18 points, soit 24 pixels CSS, ou au moins 14 points en gras, soit environ 18.66 pixels CSS. Tout ce qui est plus petit est du texte normal et exige le ratio le plus élevé.
Quel est le gris le plus clair qui réussit AA sur du blanc ?
#767676 sur du blanc a un ratio de 4.54:1 et réussit la vérification de 4.5:1 pour le texte normal. Le gris juste plus clair, #777777, obtient 4.47:1 et échoue. Pour 7:1 (AAA), le gris le plus clair est #595959, qui obtient 7.00:1.
Pourquoi 4.49 échoue-t-il alors qu’il ressemble à 4.5 ?
Les vérifications comparent le ratio exact au seuil. Un ratio de 4.499 est inférieur à 4.5 : il échoue, et la page l’affiche 4.49:1 au lieu de l’arrondir à la hausse. Le rouge pur sur blanc en est un exemple réel : 3.99:1 échoue à la vérification de 4.5:1 pour le texte normal, bien qu’il en soit proche.
Quel contraste faut-il pour les icônes, les bordures et les champs de formulaire ?
Le critère de réussite 1.4.11 Contraste du contenu non textuel, ajouté dans les WCAG 2.1, demande au moins 3:1 entre les éléments d’interface ou graphiques qu’un lecteur doit voir, comme la bordure d’un champ, un anneau de focus ou la ligne d’un graphique, et les couleurs voisines. Les contrôles désactivés et les graphiques purement décoratifs en sont exemptés.
Un ratio qui réussit rend-il une page accessible ?
Non. Le contraste est une exigence parmi beaucoup d’autres. La taille et l’épaisseur de la police, l’interligne, une couleur seule porteuse de sens, la visibilité du focus, le texte sur des images et des dégradés, et la façon dont les personnes ayant différentes vues des couleurs perçoivent une page comptent aussi. Utilisez ce résultat comme un élément parmi d’autres et testez la page avec du vrai contenu.