Comment vérifier le contraste des couleurs selon WCAG
Une paire de couleurs qui semble correcte sur votre écran peut encore échouer WCAG pour vos utilisateurs. Collez les deux valeurs HEX, lisez le ratio exact et voyez d’un coup quels seuils elle franchit, avant que la palette n’entre dans le design system.
Étape par étape
Ouvrez le vérificateur de contraste
Lancez le vérificateur gratuit ; le calcul s’exécute dans votre navigateur.
Saisissez la couleur de premier plan
Entrez la couleur du texte ou de l’icône en HEX, par exemple #0F172A.
Saisissez la couleur de fond
Entrez la surface sur laquelle elle repose, par exemple #FFFFFF.
Lisez le ratio
La paire est notée avec la formule WCAG : #0F172A sur #FFFFFF donne 17,85:1 et passe AA et AAA pour le texte normal et le grand texte.
Vérifiez tous les seuils
Voyez AA (4,5:1), AAA (7:1), grand texte (3:1) et le niveau 3:1 pour les composants d’interface évalués séparément, avec un aperçu en direct de la paire.
Conseils pour réussir du premier coup
Inverser premier plan et fond ne change jamais le ratio (la luminance la plus claire passe toujours au numérateur), mais l’aperçu peut sembler différent en contexte.
Grand texte signifie au moins 18 points, ou 14 points en gras, au sens de WCAG 2 ; l’outil rapporte le ratio mais ne peut pas déduire la taille ou la graisse de police rendue.
Seules les couleurs HEX opaques sont évaluées : la composition alpha, les dégradés et les images de fond sont hors du calcul, et un ratio suffisant ne rend pas à lui seul une interface accessible.
Questions fréquentes
Qu’est-ce qui compte comme grand texte dans les vérifications WCAG affichées ?
WCAG 2 définit le texte à grande échelle comme au moins 18 points, ou au moins 14 points en gras. L’outil rapporte le ratio et le seuil mais ne peut pas déduire la taille ou la graisse de police rendue de votre interface.
Inverser les deux couleurs change-t-il le ratio de contraste ?
Non. Le ratio place toujours la luminance la plus claire sur la plus sombre, donc l’ordre premier plan/fond ne change pas le résultat numérique.