Ratio de contraste
Le ratio de contraste est un nombre entre 1:1 et 21:1 qui mesure l'écart de luminosité entre deux couleurs. Les WCAG s'appuient sur ce ratio pour fixer des seuils de lisibilité : 4,5:1 pour le texte courant, 3:1 pour le texte de grande taille et les composants d'interface. Il se calcule à partir de la luminance relative des deux couleurs comparées.
Un texte gris #777777 sur fond blanc. Votre œil le lit sans effort. Le ratio de contraste dit 4,48:1. À deux centièmes près, c'est non conforme au niveau AA des WCAG. Tout le principe du ratio tient dans ce décalage : remplacer le « je vois bien » par une mesure objective.
#Comment se calcule le ratio ?
La formule est courte : (L1 + 0,05) / (L2 + 0,05). L1 est la luminance relative de la couleur la plus claire, L2 celle de la plus foncée.
La luminance relative se calcule à partir des composantes rouge, verte et bleue de chaque couleur, pondérées selon la sensibilité de l'œil humain : le vert pèse 71,52 %, le rouge 21,26 %, le bleu 7,22 %.
Le résultat va de 1:1 (deux couleurs identiques) à 21:1 (noir pur sur blanc pur). Le 0,05 ajouté au numérateur et au dénominateur simule l'effet de la lumière ambiante.
#Pourquoi 4,5:1 exactement ?
Le critère 1.4.3 des WCAG fixe ce seuil pour une raison précise. Il correspond au point où une personne ayant une acuité visuelle de 20/40, seuil typique de la basse vision modérée, peut lire du texte sans technologie d'assistance. Le niveau AAA monte à 7:1 pour couvrir une acuité de 20/80.
Pour le texte de grande taille (≥ 24 px, ou ≥ 18,5 px en gras), le seuil descend à 3:1 : les caractères plus grands compensent un contraste plus faible.
#Le piège du ratio « presque bon »
#777777 sur blanc : 4,48:1. Non conforme. #767676 sur blanc : 4,54:1. Conforme. Une nuance invisible à l'œil, un verdict binaire dans un audit.
Ce seuil net pousse certaines équipes à viser exactement le minimum. Les conditions réelles (écran vieillissant, soleil direct, fatigue oculaire) dégradent le contraste perçu bien en dessous du ratio calculé. Visez au moins 5:1 pour absorber ces variables.
#Ce qui change avec les WCAG 3
Le modèle actuel a une limite connue : il traite de la même façon du texte blanc sur fond sombre et du texte sombre sur fond clair, alors que la perception diffère. Les WCAG 3 prévoient un nouvel algorithme, l'APCA (Accessible Perceptual Contrast Algorithm), qui prend en compte la polarité et les propriétés typographiques du texte.
#En résumé
Le ratio de contraste traduit une différence de luminosité en chiffre vérifiable. Retenez 4,5:1 pour le texte, 3:1 pour les composants d'interface. Ne visez pas le minimum : les conditions réelles sont toujours moins bonnes que votre écran de bureau.