Contraste WCAG : comprendre les ratios AA et AAA

Un gris clair sur fond blanc paraît élégant sur l’écran d’un designer, et devient illisible en plein soleil ou pour une personne malvoyante. Les WCAG (Web Content Accessibility Guidelines) chiffrent cette différence avec un rapport de contraste, de 1:1 à 21:1.

Voici d’où viennent les seuils AA et AAA, ce qu’ils couvrent exactement, les erreurs qui reviennent le plus souvent et comment corriger un couple de couleurs insuffisant.

Comment se calcule un ratio de contraste#

Chaque couleur reçoit une luminance relative entre 0 (noir) et 1 (blanc), calculée à partir de ses composantes rouge, vert et bleu, avec un poids différent pour chacune : l’œil est bien plus sensible au vert qu’au bleu. Le ratio vaut ensuite :

(L1 + 0,05) / (L2 + 0,05)

L1 est la luminance de la couleur la plus claire. Noir sur blanc donne 21:1, deux couleurs identiques 1:1. La teinte n’intervient pas directement, seule compte la luminosité perçue. D’où ce résultat parfois surprenant : sur le violet #6155f5, le texte blanc atteint environ 5,1:1 et le texte noir environ 4,1:1. Noir n’est donc pas toujours le choix le plus lisible.

Les seuils AA et AAA#

Texte normal : 4,5:1 pour le niveau AA, 7:1 pour le niveau AAA.
Grand texte : 3:1 pour AA, 4,5:1 pour AAA.
Composants d’interface et éléments graphiques (bordure de champ, icône sans texte, indicateur de focus) : 3:1, niveau AA, depuis WCAG 2.1.

Le « grand texte » désigne une taille d’au moins 24 px (18 pt), ou d’au moins 18,66 px (14 pt) en gras. Les textes purement décoratifs, les logotypes et les éléments désactivés sont exemptés.

La plupart des projets visent le niveau AA. Les seuils sont stricts : 4,49:1 ne passe pas.

Les erreurs les plus fréquentes#

Le gris clair sur blanc. #999999 donne environ 2,8:1 et #9ca3af environ 2,5:1. Le gris le plus clair qui passe sur blanc est #767676 (4,54:1) ; #777777 échoue de peu, à environ 4,48:1 (le vérificateur tronque au centième au lieu d’arrondir et affiche 4,47:1).
Le texte blanc sur une couleur vive. Blanc sur rouge #ff0000 : environ 4:1, donc insuffisant pour du texte courant, suffisant pour du grand texte. Blanc sur jaune #ffeb3b : 1,22:1.
Le texte posé sur une photo. Le contraste varie d’un point à l’autre de l’image. Placez le texte sur un aplat, ou ajoutez un voile sombre sous le texte.
Les placeholders. Ils sont souvent trop pâles, alors que ce sont des textes à lire.
Les états oubliés. Survol, focus, mode sombre : chaque variante a son propre couple de couleurs à tester.

Corriger un contraste insuffisant#

Le plus simple est d’assombrir le texte (ou de l’éclaircir sur un fond foncé) sans changer sa teinte : la couleur reste reconnaissable, seule sa luminosité bouge. Le gris #9ca3af sur blanc, à environ 2,5:1, devient par exemple #6d7787, à environ 4,5:1, juste au-dessus du seuil.

Si aucune variante de la teinte n’atteint 4,5:1, changez de fond. Agrandir ou épaissir le texte permet de passer au seuil de 3:1, mais seulement quand il devient du grand texte : on ne le fait pas pour un paragraphe.

Mesurer avec le vérificateur de contraste#

Saisissez la couleur du texte et celle du fond, en hexadécimal à 3 ou 6 chiffres ou avec le sélecteur.
Lisez le ratio et le tableau des cinq critères : texte normal AA et AAA, grand texte AA et AAA, composants d’interface AA. Chaque ligne indique « Réussi » ou « Échec » avec une icône, pas seulement une couleur.
Regardez l’aperçu (grand texte, texte normal, bouton). Le bouton « Inverser texte et fond » échange les deux couleurs.
Si le texte normal échoue, l’outil propose la couleur la plus proche de même teinte qui atteint 4,5:1 : « Utiliser » l’applique en un clic.

Le vérificateur de contraste travaille avec des couleurs opaques, sans transparence : si votre texte a une opacité, calculez d’abord la couleur obtenue. Pour passer d’un rgb() ou d’un hsl() à un code HEX, le convertisseur de couleurs fait la conversion et affiche aussi le contraste avec du texte blanc et du texte noir.

Ce qu’un ratio ne dit pas#

Un bon ratio est nécessaire, pas suffisant. Une police très fine, un corps trop petit ou un reflet sur l’écran peuvent rendre pénible un texte pourtant conforme. Le contraste n’est d’ailleurs qu’une vérification parmi d’autres : clavier, libellés, titres… tout est listé dans l’article sur les vérifications d’accessibilité avant publication.