Contraste des couleurs : pourquoi un 4,5 arrondi peut échouer
Comparez les rapports de contraste sRGB sans arrondi et distinguez le contrôle de deux couleurs de l’accessibilité d’une interface.
Méthode
Le contraste exprime la différence de luminance relative entre le texte et son arrière-plan réel. Examinez les couleurs effectivement peintes dans le badge. Un texte pâle sur un fond clair peut devenir illisible même si le panneau qui entoure le badge est sombre.
Pour deux couleurs sRGB opaques, normalisez les canaux rouge, vert et bleu, puis linéarisez-les avant de calculer la luminance relative. Divisez la luminance claire augmentée de 0,05 par la luminance sombre augmentée de 0,05. Noir et blanc donnent 21:1 ; deux couleurs identiques donnent 1:1.
Sur fond blanc, RGB 119,119,119 donne environ 4,478089:1 et RGB 118,118,118 environ 4,542225:1. Arrondis à une décimale, les deux peuvent afficher 4,5. Pourtant, seule la seconde combinaison atteint le seuil AA de 4,5:1 pour le texte courant. Décidez avec le rapport non arrondi.
Voir les données
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Exemple détaillé
Sur fond blanc, RGB 119,119,119 donne environ 4,478089:1 et RGB 118,118,118 environ 4,542225:1. Arrondis à une décimale, les deux peuvent afficher 4,5. Pourtant, seule la seconde combinaison atteint le seuil AA de 4,5:1 pour le texte courant. Décidez avec le rapport non arrondi.
Le grand texte répondant aux critères de taille et de graisse possède un seuil AA de 3:1. Un badge large ne transforme pas son texte en grand texte. Le seuil AAA du texte courant est de 7:1. Choisissez la catégorie applicable avant d’interpréter le résultat.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
Ce contrôle ne certifie pas une page entière. Vérifiez les états de survol, de focus, d’erreur et de désactivation, les deux thèmes, les transparences, dégradés et images. Examinez aussi la taille du texte, le clavier et les indicateurs non textuels. Des libellés explicites doivent compléter la couleur.
Voir les données
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Résultat
- 4.478089 : 1
Vérifications et limites
Ce contrôle ne certifie pas une page entière. Vérifiez les états de survol, de focus, d’erreur et de désactivation, les deux thèmes, les transparences, dégradés et images. Examinez aussi la taille du texte, le clavier et les indicateurs non textuels. Des libellés explicites doivent compléter la couleur.