Un contraste de couleurs suffisant détermine si le texte reste lisible pour tous : aussi en cas de basse vision, sous une lumière solaire intense ou sur des écrans de mauvaise qualité. Avec le Vérifier le contraste des couleurs (WCAG), vous vérifiez deux couleurs face aux Règles pour l'accessibilité des contenus Web (WCAG 2.1) en quelques secondes. Ce guide explique la formule, les seuils et un cas limite courant issu de projets réels.
Comment le ratio de contraste est calculé
Le ratio de contraste décrit la différence de luminosité entre la couleur de premier plan et celle d'arrière-plan. Il est établi à partir de la luminance relative L des deux couleurs :
Ratio de contraste = (L_clair + 0,05) / (L_sombre + 0,05)
Ici, L_clair est la luminance relative de la couleur la plus claire et L_sombre celle de la plus sombre (WCAG 2.1). La luminance relative pondère les composantes rouge, verte et bleue selon la perception humaine. Les valeurs vont de 1:1 (aucun contraste, couleurs identiques) jusqu'à 21:1, le maximum pour du noir pur sur du blanc pur.
Les seuils WCAG pour AA et AAA
WCAG définit deux niveaux de conformité (AA, AAA) et deux tailles de texte. « Grand texte » signifie à partir de 18 pt ou à partir de 14 pt en gras. Un texte plus petit et de graisse normale est considéré comme texte normal.
| Exigence | Texte normal | Grand texte |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA est le niveau minimal exigé par la plupart des lois et appels d'offres, tandis que AAA est la recommandation la plus exigeante. Un grand texte peut avoir un contraste plus faible, car des formes de lettres plus épaisses restent lisibles même avec une différence moindre.
Exemple : un cas limite serré
Une erreur fréquente consiste à utiliser un gris moyen pour le texte courant. Le gris pur #777777 sur fond blanc donne un ratio de contraste d'environ 4,48:1. Cela reste juste en dessous du seuil AA de 4,5:1 : ce n'est donc pas accessible pour le texte courant, même si cela semble suffisant au premier coup d'œil. Seul un gris un peu plus sombre atteint les 4,5:1 requis. Ce sont précisément ces cas limites que le calculateur révèle de manière fiable.
Comment effectuer la vérification
Saisissez la couleur de premier plan et celle d'arrière-plan sous forme de valeurs hexadécimales, par exemple #333333 sur #FFFFFF. Le calculateur renvoie le ratio et indique, pour chaque combinaison de niveau et de taille de texte, si elle est validée. Vérifiez toujours les couleurs de texte face à l'arrière-plan réel, y compris les boutons, les liens en état survol et le texte sur images. Vous garantissez ainsi que votre design est non seulement attrayant, mais aussi manifestement accessible.
