Formule de contraste
WCAG utilise la luminance relative de chaque couleur. Le ratio est compris entre 1:1 (couleurs identiques) et 21:1 (noir sur blanc). La formule est (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance de la couleur la plus claire.
Texte normal et grand texte
Le texte normal doit atteindre 4,5:1 en AA. Le grand texte a un seuil plus bas, 3:1, car les formes de lettres plus grandes restent lisibles avec moins de contraste. WCAG définit le grand texte autour de 18pt régulier ou 14pt gras.
Pourquoi garder une marge
Les polices fines, l’anti-crénelage, les écrans peu lumineux et le zoom peuvent dégrader la lisibilité perçue. Pour un texte courant, viser 5:1 ou plus est souvent plus robuste que de se contenter de 4,51:1.
Exemple CSS
.body-text {
color: #2f3440;
background: #ffffff; /* ratio élevé, lisible */
}
.muted-label {
color: #6b7280; /* vérifier avant usage sur blanc */
}