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.
793 vues
Portez ce vieux whisky au juge blond qui fume
Exemple de grand texte 24px
Ce que signifie le ratio
Le ratio de contraste compare la luminance relative de deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc). Le WCAG exige 4,5:1 pour le texte normal (AA) et 3:1 pour le grand texte (≥24 px, ou ≥18,7 px en gras) ; le niveau AAA plus strict demande 7:1 et 4,5:1. Les composants d'interface et les graphiques nécessitent 3:1 par rapport aux couleurs adjacentes.
Le calcul linéarise chaque canal sRGB, les pondère (L = 0,2126R + 0,7152G + 0,0722B) et calcule (L₁+0,05)/(L₂+0,05). L'intuition trompe souvent ici — un gris moyen #777 sur blanc semble lisible à beaucoup d'yeux mais obtient 4,48:1, juste sous le seuil AA. Les marges existent pour les personnes malvoyantes, le plein soleil et les écrans bas de gamme.
Questions fréquentes
Échanger texte et fond change-t-il le ratio ?
Non — la formule place toujours la couleur la plus claire au numérateur, 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) normal ou environ 18,7 px (14 pt) gras et plus. Le grand texte ne nécessite que 3:1 en AA car les glyphes plus grands restent lisibles à contraste plus faible.
Ma couleur de marque échoue — que faire ?
Gardez-la pour la décoration et assombrissez ou éclaircissez son usage en texte jusqu'à ce qu'elle passe ; une échelle de teintes aide. Le texte de substitution et les états désactivés sont exemptés de l'exigence, mais restez raisonnable.
Outils similaires
Signaler un problème
Vérificateur de contraste WCAG