Grand texte
Texte courant normal
Petite légende
#000000 À propos de cet outil
Le ratio de contraste de couleur mesure la différence perceptuelle de luminance entre deux couleurs, exprimée par une valeur allant de 1:1 (identiques) à 21:1 (noir pur sur blanc pur). La formule WCAG 2.x linéarise chaque canal sRGB — un segment linéaire en dessous de 0.03928 et une courbe en puissance 2.4 au-dessus — les pondère à 0.2126 R / 0.7152 G / 0.0722 B pour obtenir la luminance relative, puis calcule (plus clair + 0.05) / (plus sombre + 0.05). Les Web Content Accessibility Guidelines fixent quatre seuils : AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte (>=24px, ou >=18.66px en gras) ; AAA porte ces valeurs à 7:1 et 4.5:1.
Utilisez-le pour vérifier que le corps de texte, les boutons, les liens et les étiquettes de formulaire répondent aux exigences d'accessibilité avant la mise en production, pour déboguer une paire de couleurs de design system signalée par un audit, ou pour trouver une alternative conforme sans abandonner votre palette. Saisissez n'importe quelle couleur CSS — hexadécimal, rgb(), hsl(), ou une couleur nommée — dans l'un ou l'autre champ, lisez en direct le ratio et la grille de notes, et lorsque le niveau AA échoue, appliquez le premier plan suggéré qui ajuste la luminosité OKLCH de la couleur d'origine juste assez pour atteindre 4.5:1.
Le ratio de contraste ne dépend que de la luminance, pas de la teinte — deux couleurs ayant la même luminosité peuvent être radicalement différentes tout en échouant, car les utilisateurs daltoniens et malvoyants s'appuient sur la différence de luminance.
Questions fréquentes
Quel ratio de contraste faut-il pour réussir le WCAG ?
Le WCAG 2.1 niveau AA exige un ratio de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte (24px ou plus, ou 18.66px en gras). Le niveau AAA exige 7:1 pour le texte normal et 4.5:1 pour le grand texte.
Qu'est-ce qui compte comme grand texte pour le contraste ?
Le grand texte fait 18.66px (14pt) ou plus en gras, ou 24px (18pt) ou plus en graisse normale. Il est soumis à un seuil de contraste plus bas, car des glyphes plus grands restent lisibles à un contraste plus faible.
Comment le ratio de contraste WCAG est-il calculé ?
La luminance relative de chaque couleur est obtenue en linéarisant ses canaux sRGB et en les pondérant à 0.2126 R + 0.7152 G + 0.0722 B. Le ratio est alors (luminance plus claire + 0.05) / (luminance plus sombre + 0.05), donnant une valeur comprise entre 1:1 et 21:1 qui est indépendante de la couleur retenue comme premier plan.