Calcule le ratio de contraste entre une couleur de texte et une couleur de fond, et vérifie s'il respecte les directives d'accessibilité WCAG 2.1. Le ratio va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Choisissez la couleur du texte et la couleur du fond avec les sélecteurs. L'aperçu et le ratio se mettent à jour instantanément pendant que vous ajustez les couleurs.
Le ratio de contraste mesure la différence de luminosité entre les deux couleurs. Il se calcule en deux étapes :
• Luminance relative — pour chaque couleur on calcule la lumière perçue par l'œil avec la formule WCAG : chaque canal R, V et B est ramené sur une échelle 0-1, la gamma est corrigée (linéarisation), puis combinés avec des poids 0.2126·R + 0.7152·V + 0.0722·B (le vert pèse plus car l'œil le perçoit plus lumineux). Le résultat va de 0 (noir) à 1 (blanc).
• Ratio — avec la luminance de la couleur la plus claire (L1) et celle de la plus sombre (L2), on applique (L1 + 0.05) / (L2 + 0.05). Le +0.05 évite les divisions extrêmes. Il est symétrique : peu importe lequel est le texte et lequel est le fond, le ratio est le même.
Chaque combinaison est évaluée selon quatre critères : AA normal (≥4.5:1), AA grand (≥3:1), AAA normal (≥7:1) et AAA grand (≥4.5:1). AA est le minimum recommandé ; AAA est le niveau le plus exigeant.
Les seuils ci-dessus concernent le texte. Les éléments non textuels ont leur propre règle WCAG (critère 1.4.11) : bordures de champs, icônes, contrôles de formulaire et les parties significatives d'un graphique nécessitent un contraste d'au moins 3:1 par rapport à ce qui les entoure. Cet outil affiche les quatre badges de texte ; pour une icône ou une bordure, vérifiez que le ratio atteint 3:1 même si le badge « AA normal » échoue.
On considère comme grand texte celui de 18pt ou plus (environ 24px), ou celui de 14pt ou plus (environ 18.67px) en gras. Le grand texte exige moins de contraste que le texte normal.
Sous le ratio, il y a quatre lignes, une par critère, avec un badge :
• PASS (vert, avec une coche) — cette combinaison respecte ce niveau.
• FAIL (rouge, avec une croix) — ne le respecte pas ; il faut augmenter le contraste.
Comme les seuils sont croissants, si ça passe AAA normal (7:1) ça passe aussi tous les autres. Un texte qui ne passe que « AA grand » (3:1) n'est pas valide pour du texte normal.
Si une combinaison échoue :
• Foncez le texte ou éclaircissez le fond (ou l'inverse) : plus la différence de luminance est grande, plus le ratio est élevé.
• Ne vous fiez pas seulement à la teinte — deux couleurs vives (rouge sur vert) peuvent avoir un contraste très faible malgré leur « choc » visuel. Ce qui compte, c'est la lumière, pas la couleur.
• Le gris moyen est traître : un texte gris clair sur blanc échoue souvent ; rapprochez-le du noir.
• N'utilisez pas seulement la couleur pour transmettre une information (liens, erreurs) : accompagnez-la d'un soulignement, d'une icône ou d'un texte.
• Ajustez les sélecteurs jusqu'à ce que le badge qui vous intéresse passe à PASS.
Texte grand = 18pt+ (24px) ou 14pt+ (18.67px) gras