Ce que mesure le ratio de contraste
Il compare la luminance du texte à celle du fond, sur une échelle allant de 1:1 (la même couleur) à 21:1 (noir sur blanc). Il ne dépend pas de la teinte : un rouge et un vert de même luminance ont un contraste très faible même s’ils semblent très différents, et c’est justement la paire que les personnes daltoniennes ne distinguent pas.
Niveaux AA et AAA
- AA, texte normal : 4,5:1. Le minimum exigé par la plupart des lois sur l’accessibilité, comme la directive européenne, la norme EN 301 549 et le RGAA.
- AA, grand texte : 3:1. Un texte est considéré comme grand à partir de 24 px, ou 18,66 px en gras (18 et 14 points).
- AAA : 7:1 et 4,5:1. Le niveau renforcé. Recommandé pour les textes longs, comme les articles ou la documentation.
- Icônes et commandes : 3:1. Bordures des champs de formulaire, icônes sans texte et indicateur de focus (critère 1.4.11).
Le ratio n’est pas arrondi : 4,49:1 n’atteint pas AA, même à un centième près. C’est pourquoi le gris le plus clair
conforme AA sur blanc est #767676 (4,54:1), alors que #777777 n’y arrive plus.
Comment corriger un contraste insuffisant
Le plus simple est d’assombrir le texte (ou de l’éclaircir, si le fond est sombre) sans changer la teinte : c’est ce que fait la suggestion de l’outil, qui garde la couleur de la marque et n’ajuste que la luminosité. Si la couleur est intouchable, réservez-la aux grands éléments, comme les titres ou le fond des boutons, et gardez le petit texte dans une couleur plus contrastée.
Texte sur des images
Le contraste d’un texte sur une photo varie d’un point à l’autre, et aucun outil ne peut le garantir. La solution sûre est de placer un calque de couleur semi-transparent ou un dégradé entre la photo et le texte, puis de vérifier le pire cas. L’aperçu utilise une image du générateur ximg.es aux mêmes couleurs, pour voir le rendu du texte d’une image de substitution :
https://ximg.es/600x300/{fond}/{texte}.png?text=Bonjour