Vérificateur de contraste WCAG

Comment utiliser l’outil

Saisissez ou choisissez la couleur du texte et celle du fond, avec le sélecteur ou en écrivant la valeur. Le rapport s’affiche tout de suite, suivi d’un tableau de résultats pour cinq cas d’usage et d’un aperçu du texte sur le fond. Si la paire ne passe pas le niveau AA du texte normal, l’outil propose la couleur de texte la plus proche qui le passe.

Pour contrôler toute une charte, collez une paire par ligne dans le second champ, sous la forme « texte ; fond ». Le tableau donne le résultat de chaque ligne et se télécharge en CSV. Les lignes illisibles sont signalées sans bloquer les autres.

Ce que l’outil calcule

Le W3C définit le rapport de contraste par la formule (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre.¹ La luminance relative vaut 0,2126 × R + 0,7152 × G + 0,0722 × B, chaque canal sRGB étant d’abord linéarisé : divisé par 12,92 s’il est inférieur ou égal à 0,04045, sinon ((valeur + 0,055) / 1,055) à la puissance 2,4.¹ Le rapport va de 1:1 (deux couleurs identiques) à 21:1 (noir sur blanc).

Seuils du texte de WCAG 2.2.¹

Le grand texte désigne un texte d’au moins 18 points, ou 14 points en gras. Le W3C précise que 1 point vaut environ 1,333 pixel CSS, soit à peu près 24 px et 18,5 px.² Le critère 1.4.11 demande 3:1 contre les couleurs voisines pour les éléments d’interface nécessaires à l’identification d’un composant et de ses états, et pour les parties d’un graphique indispensables à sa compréhension.¹

Pas d’arrondi vers le haut

Le W3C écrit que les valeurs calculées ne doivent pas être arrondies : 4,499:1 ne satisfait pas 4,5:1.² L’outil compare donc le rapport exact au seuil, et il affiche le rapport tronqué à deux décimales, jamais arrondi à l’entier supérieur. Le gris #767676 sur blanc donne 4,54:1 et passe de justesse, tandis que #777777 donne 4,47:1 et échoue.

La couleur corrigée

Quand la paire échoue au niveau AA du texte normal, l’outil cherche la couleur de texte la plus proche qui atteint 4,5:1. Il convertit la couleur en teinte, saturation et clarté, conserve la teinte et la saturation et ne fait varier que la clarté, vers le plus clair ou le plus sombre selon ce qui demande le plus petit écart. La proposition est un point de départ : à vous de vérifier qu’elle respecte votre charte.

Les couleurs transparentes

Une couleur avec un canal alpha n’a pas de contraste propre, puisqu’elle dépend de ce qui se trouve derrière. L’outil compose le texte transparent sur le fond saisi avant de mesurer, et il compose un fond transparent sur du blanc, hypothèse de l’outil. Quand une transparence est détectée, la page affiche les deux couleurs opaques réellement mesurées.

Les limites

L’outil mesure un rapport entre deux couleurs, et rien d’autre. Il n’évalue pas l’accessibilité d’un site entier : navigation au clavier, textes alternatifs, structure des titres ou compatibilité avec les lecteurs d’écran restent à contrôler.

Trois cas demandent un contrôle à la main. Les images de texte et les dégradés n’ont pas une couleur de fond unique, et le W3C range les images de fond sans contraste suffisant parmi les échecs du critère.² Les états au survol, au focus ou désactivés ont chacun leurs couleurs à vérifier séparément. Le texte purement décoratif, invisible ou faisant partie d’un logo est exempté du critère.¹

Contraste et référencement

Le contraste relève de l’accessibilité : un visiteur malvoyant, ou simplement devant un écran au soleil, lit mal un texte pâle sur fond clair. L’outil ne dit rien de votre classement dans Google. Pour vérifier le reste d’une page, lancez l’audit SEO d’une page. Les textes alternatifs des images touchent eux aussi l’accessibilité, et le vérificateur de textes alternatifs les contrôle.

Questions fréquentes