Vérificateur de contraste WCAG
Vérifiez le ratio de contraste d'une paire texte/fond selon les normes WCAG AA et AAA — avec aperçu en direct en texte normal et grand.
1 132 vues
Portez ce vieux whisky au juge blond qui fume
Exemple de grand texte 24px
Comment le ratio est calculé
La formule WCAG est (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée — le résultat se situe donc toujours entre 1:1 (couleurs identiques) et 21:1 (noir pur sur blanc pur). La luminance relative n'est pas une simple moyenne des canaux RVB ; c'est une somme pondérée perceptuellement, L = 0,2126R + 0,7152G + 0,0722B, appliquée après que chaque canal a été linéarisé en inversant la courbe gamma sRGB (les valeurs inférieures à 0,03928 sont divisées par 12,92, les autres passent par ((c+0,055)/1,055)^2,4). Le vert contribue environ dix fois plus à la luminosité perçue que le bleu, de sorte qu'échanger les canaux vert et bleu d'une couleur peut déplacer considérablement son poids visible alors que la luminosité brute reste identique.
Un exemple concret : le gris moyen pur #767676 sur fond blanc donne exactement 4,54:1 — juste au-dessus du seuil WCAG AA de 4,5:1 pour le texte normal. Assombrissez-le d'un cran à #757575 et il tombe à 4,48:1, échouant à AA. C'est pourquoi tant de designs gris sur blanc échouent silencieusement à un audit : l'écart visuel entre un gris qui passe et un gris qui échoue tient à un seul pas RVB, invisible pour la plupart des yeux mais bien visible pour un scanner automatisé ou pour une personne malvoyante en plein jour.
Ce que vous devez savoir
Le WCAG 2.1 fixe deux seuils AA selon la taille du texte : 4,5:1 pour le texte normal, et un seuil assoupli de 3:1 pour le grand texte — défini comme 18 pt (24 px) en graisse normale ou 14 pt (18,7 px) en gras et plus, car des traits plus épais restent lisibles à un contraste plus faible. Le niveau AAA, plus strict, exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les éléments d'interface non textuels comme les icônes, les bordures de champs de saisie et les indicateurs de focus ont leur propre exigence de 3:1 selon le critère WCAG 2.1 SC 1.4.11, mesurée par rapport à la couleur de fond adjacente.
Ces chiffres ne sont pas arbitraires — ils proviennent de recherches sur la lisibilité pour les personnes malvoyantes, daltoniennes ou souffrant d'une perte de sensibilité au contraste liée à l'âge, et servent aussi de référence légale dans des réglementations d'accessibilité telles que l'ADA et la norme EN 301 549, la norme européenne derrière l'European Accessibility Act. Un échec de contraste est l'un des problèmes les plus fréquemment relevés dans les audits automatisés d'accessibilité web, ce qui explique pourquoi de nombreux systèmes de design intègrent directement un seuil de 4,5:1 dans leurs tokens de couleur plutôt que de laisser cette vérification à chaque designer.
Questions fréquentes
Échanger le texte et le fond change-t-il le ratio ?
Non — la formule place toujours la couleur la plus claire en haut, donc le ratio est symétrique. La lisibilité peut néanmoins différer subjectivement (halo du texte clair sur fond sombre), mais le score WCAG est identique.
Qu'est-ce qui compte comme grand texte ?
24 px (18 pt) en graisse normale ou environ 18,7 px (14 pt) en gras et plus. Le grand texte ne nécessite que 3:1 en AA car des glyphes plus grands restent lisibles à un contraste plus faible.
Ma couleur de marque échoue le test — que faire ?
Conservez-la pour la décoration et assombrissez ou éclaircissez son usage en texte jusqu'à ce qu'elle passe ; une échelle de teintes/nuances y aide. Le texte de substitution (placeholder) et les états désactivés sont exemptés de l'exigence, mais restez raisonnable.
Pourquoi utiliser une luminance corrigée en gamma plutôt qu'une simple moyenne RVB ?
Parce que la luminosité perçue n'est ni linéaire ni égale entre les canaux — faire la moyenne du RVB brut traiterait un jaune vif (#ffff00) et un bleu moyen (#0000ff) comme ayant à peu près la même luminosité, alors que le jaune paraît bien plus lumineux à l'œil. L'étape de décodage gamma corrige la façon dont le sRGB compresse les valeurs au lieu de stocker une lumière linéaire, et les poids 0,2126/0,7152/0,0722 reflètent la plus grande sensibilité de l'œil au vert, puis au rouge, puis au bleu. Sauter l'une de ces étapes fait que les chiffres cessent de correspondre à ce que le contraste donne réellement à voir.
Un ratio réussi garantit-il que les couleurs fonctionnent pour les personnes daltoniennes ?
Pas totalement — le ratio ne mesure que la différence de luminance, pas la différence de teinte, donc deux couleurs peuvent réussir 4,5:1 et rester difficiles à distinguer pour une personne atteinte de deutéranopie si leur principale différence est la teinte plutôt que la clarté, comme avec certaines paires rouge/vert de luminosité équivalente. Un contraste élevé est nécessaire mais pas suffisant pour l'accessibilité aux daltoniens ; l'associer à une différence de clarté ou à un indice non coloré tel qu'une icône ou un soulignement couvre les deux cas.
Outils similaires
Signaler un problème
Vérificateur de contraste WCAG
Commentaires
Pas encore de commentaires — soyez le premier à en écrire un !