Vérificateur de contraste

Comparez les couleurs du texte et du fond aux seuils de contraste WCAG.

Frontend et design
Préparation de votre espace de travail…

Entrée

Préparation de votre espace de travail…

Sortie
Votre résultat apparaîtra ici.

Mode d’emploi

  1. Saisissez des couleurs opaques de texte et de fond.
  2. Consultez l’aperçu, le rapport et chaque résultat de conformité.
  3. Ajustez les couleurs ou utilisez Inverser les couleurs, puis copiez le rapport.

Lire un résultat de contraste

Une couleur de texte peut être lisible sur un fond et disparaître sur un autre. L’outil distingue les exigences pour texte normal, grand texte et éléments graphiques d’interface.

L’aperçu donne un contexte visuel ; les résultats utilisent le rapport calculé. Taille et graisse de police ainsi que la composition finale restent à évaluer.

Comprendre le rapport

La luminance relative est calculée avec les canaux sRGB linéarisés. Le rapport divise la luminance claire plus 0,05 par la sombre plus 0,05.

Noir sur blanc atteint 21:1. Inverser texte et fond conserve le rapport, mais change l’aspect visuel.

Exemple
Entrée
#000000 on #ffffff
Résultat
21.00:1 · AA and AAA pass

Le texte noir sur blanc atteint le contraste WCAG maximal de 21:1.

Seuils et arrondis

Le texte normal exige 4,5:1 pour AA et 7:1 pour AAA. Le grand texte exige 3:1 et 4,5:1 ; les éléments d’interface utilisent 3:1 lorsque le critère s’applique.

Le rapport affiché a deux décimales, mais la décision utilise la valeur complète. Les couleurs transparentes sont refusées car leur couleur effective dépend du fond.

Vérifier l’interface terminée

Tenez compte de la taille, de la graisse et des états des composants. Une paire conforme n’évalue ni visibilité du focus, ni clavier, ni libellés, ni le reste de la page.

Limites de traitement

Texte de 1 MiB maximum. Les transformations CSS et HTML s'exécutent dans un worker avec une limite de 30 secondes. Les outils de couleur utilisent sRGB ; les styles générés sont des aperçus à tester dans votre propre mise en page.

?

Questions fréquentes

Pourquoi un rapport affiché au seuil peut-il échouer ?

L’affichage peut arrondir vers le haut. Le test utilise la valeur complète : un rapport juste inférieur échoue toujours.

Puis-je saisir des couleurs transparentes ?

Non. Fournissez les couleurs opaques finales après composition sur le fond concerné.

L’inversion change-t-elle le rapport ?

Non. Le rapport de luminance est symétrique. L’aperçu inversé permet de comparer les deux présentations.

Un résultat AA signifie-t-il que toute la page est accessible ?

Non. Seule cette paire est comparée aux seuils affichés. Le critère applicable et les autres exigences d’accessibilité nécessitent un examen séparé.

Puis-je enregistrer le résultat ?

Copier copie le rapport affiché. L’outil ne produit ni rapport d’accessibilité ni certification de page.

Trouvez votre prochain outil

Langue

Changer de langue ? Le contenu actuel sera effacé. Copiez ou téléchargez d’abord votre travail.