Vérifie si deux couleurs —celle du texte et celle du fond— se distinguent assez pour que n'importe qui puisse les lire, y compris les personnes ayant une basse vision ou un daltonisme. Il calcule le ratio de contraste entre les deux et le compare aux seuils officiels d'accessibilité WCAG 2.1. Le ratio va de 1:1 (deux couleurs identiques, illisible) à 21:1 (noir pur sur blanc pur). Tout le calcul se fait dans ton navigateur : rien n'est envoyé à un serveur.
1. Clique sur le sélecteur Couleur du texte et choisis la couleur de la lettre.
2. Clique sur celui de Couleur du fond et choisis le fond sur lequel il reposera.
3. L'aperçu montre un exemple réel avec ces deux couleurs, et en dessous apparaissent le ratio et les quatre badges PASS/FAIL.
4. Tout se recalcule instantanément pendant que tu déplaces les sélecteurs ; à côté de chacun s'affiche la valeur #rrggbb choisie.
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 par rapport à quatre seuils officiels. AA est le minimum légal et recommandé ; AAA est le niveau renforcé (lecture prolongée ou public à basse vision) :
• AA — texte normal : ratio ≥ 4.5:1.
• AA — grand texte : ratio ≥ 3:1.
• AAA — texte normal : ratio ≥ 7:1.
• AAA — grand texte : ratio ≥ 4.5:1.
Le grand texte exige moins car ses traits sont plus épais et se lisent mieux. Vise au minimum AA ; si possible, AAA.
Les seuils des quatre premiers badges 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 ont besoin d'un contraste d'au moins 3:1 par rapport à ce qui les entoure. C'est le cinquième badge, Composants d'interface utilisateur et graphiques.
Quand une combinaison n'atteint pas AA (ou, si elle l'atteint déjà, AAA), des couleurs de texte de la même teinte qui l'atteignent sont proposées : une plus foncée et une plus claire si elle existe, avec le minimum de changement. Seule la luminosité OKLCH est déplacée, c'est-à-dire la clarté perçue par l'œil, pour que la couleur ressemble vraiment à la tienne. Appuie sur Utiliser pour l'essayer.
Ce qu'exigent aujourd'hui les lois et les normes d'accessibilité, c'est WCAG 2.x, ce que mesure cet outil. WCAG 3 reste un brouillon du W3C (le dernier, de septembre 2026) et son texte indique que l'algorithme de contraste est encore à déterminer. APCA, que beaucoup de sites présentent comme «le contraste de WCAG 3», est sorti de ce brouillon en 2023 : c'est une proposition intéressante, mais ce n'est pas la norme. Si tu l'utilises, respecte aussi WCAG 2.
Est considéré comme grand texte —et bénéficie des seuils plus souples— celui de 18pt ou plus (environ 24px), ou celui de 14pt ou plus (environ 18.67px) lorsqu'il est en gras. En dessous de ces tailles, il compte comme texte normal et doit respecter le seuil le plus strict. L'aperçu inclut une ligne de chaque taille pour comparer.
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