Vérificateur de Contraste — Contraste WCAG
Vérifiez le ratio de contraste entre le texte et le fond selon WCAG AA/AAA et voyez le résultat instantanément.
Portez ce vieux whisky au juge blond qui fume.
Portez ce vieux whisky au juge blond qui fume.
Calculé en local
Sûr pour une identité non dévoilée
Sans compte
Connexion sécurisée
Comment ça marche
- 1
Définissez la couleur du texte
Collez le code HEX du premier plan, ou choisissez-le dans le nuancier.
- 2
Définissez la couleur du fond
Faites de même pour ce qui se trouve derrière le texte — le fond réel, pas du blanc par défaut.
- 3
Lisez le résultat
Le rapport et la conformité à chaque niveau WCAG apparaissent ensemble, avec un texte d’exemple en direct.
Pourquoi cet outil
Un nombre, pas un avis
Le contraste est un rapport mesurable entre 1:1 et 21:1. L’outil le calcule, si bien que « moi je le trouve lisible » cesse d’être l’argument décisif.
Tous les seuils d’un coup
AA et AAA, pour texte normal et grand, évalués ensemble : vous voyez aussitôt pour quels usages un couple est sûr.
Aperçu en direct
Du vrai texte rendu dans le couple testé, pour vérifier le nombre et l’apparence côte à côte.
Corrigez dans l’outil
Ajustez l’une des deux couleurs et le rapport se met à jour au fil de l’édition : vous trouvez la nuance conforme la plus proche au lieu de deviner.
Rien n’est envoyé
Le calcul est une arithmétique dans votre navigateur — aucune valeur de couleur ne part ailleurs.
Gratuit et sans compte
Aucune inscription, aucune limite, aucun filigrane sur quoi que ce soit.
Ce que le rapport de contraste mesure vraiment
Le rapport compare la luminance relative de deux couleurs — la quantité de lumière que chacune réfléchit ou émet, pondérée par la sensibilité de la vision humaine au rouge, au vert et au bleu. Il va de 1:1, où les deux couleurs sont identiques et le texte invisible, à 21:1, soit du noir pur sur du blanc pur. Point décisif : il mesure une différence de clarté et non de teinte. Un rouge saturé et un vert saturé de clarté voisine se situent près de 1:1 et sont presque illisibles ensemble, alors qu’ils paraissent maximalement différents à quelqu’un dont la vision des couleurs est typique. C’est pourquoi « ces deux couleurs contrastent fortement » est un jugement peu fiable, et pourquoi la formule existe.
Les seuils, et celui qui vous concerne
Le WCAG définit deux niveaux de conformité. Le niveau AA, visé par la plupart des organisations et par la plupart des obligations légales, demande 4,5:1 pour un texte courant et 3:1 pour un grand texte — grand signifiant 18 points, ou 14 en gras. Le niveau AAA porte ces seuils à 7:1 et 4,5:1 ; il est réaliste pour le corps de texte d’un site de documentation, rarement pour une page marketing menée par la marque. Deux choses piègent les équipes. D’abord, la tolérance accordée au grand texte est assez généreuse pour qu’un titre passe alors que le paragraphe en dessous, de la même couleur, échoue. Ensuite, les composants d’interface et les graphiques porteurs de sens — bordure de champ, icône véhiculant une information — ont leur propre exigence de 3:1, qu’un audit limité au texte manque intégralement.
Pourquoi les couleurs de marque échouent si souvent
Les palettes de marque sont choisies pour leur caractère sur de grandes surfaces, pas pour leur lisibilité à 16 pixels. Les tons moyens en sont les victimes habituelles : un orange, un turquoise ou un vert citron de marque, convaincant en remplissage de bouton, atterrit souvent entre 2:1 et 3:1 sur blanc, ce qui ne passe aucun seuil. Le réflexe est de discuter avec le nombre, et le nombre ne bouge pas. La réponse productive consiste à garder la couleur de marque là où elle fonctionne — aplats, bordures, grandes titrailles — et à dériver une variante plus sombre pour le texte courant en abaissant la luminosité en HSL jusqu’à franchir le seuil, ce que le convertisseur de couleur réduit à deux étapes. L’identité de teinte reste intacte et le texte devient lisible.
Le texte gris est l’échec le plus répandu sur le web
Le texte courant en gris clair sur blanc est devenu une convention graphique parce qu’il paraît calme et haut de gamme sur un bon écran dans une pièce lumineuse. Mesuré, `#999999` sur blanc donne environ 2,8:1 et échoue franchement en AA ; `#767676` avoisine 4,5:1 et constitue le gris le plus clair conforme pour un texte normal. L’écart entre ces deux codes hexadécimaux est invisible en revue de maquette et déterminant pour qui lit sur un téléphone en plein jour ou avec une vue un peu diminuée. Si une maquette installe la hiérarchie par le gris, le remède tient généralement à la taille et à la graisse plutôt qu’à la clarté : un gris foncé plus petit et plus léger se lit comme secondaire sans passer sous le seuil.
Ce que le rapport ne vous dit pas
Franchir 4,5:1 est un plancher, pas une garantie de bonne typographie. La formule ignore le corps au-delà de la tranche « grand texte », ignore la graisse — une police filiforme à 4,6:1 se lit moins bien qu’une graisse moyenne au même rapport — et ignore l’association chromatique elle-même. Du texte rouge sur vert passe confortablement si les clartés diffèrent assez, et reste un mauvais choix pour environ un homme sur douze présentant une déficience de la vision rouge-vert, car il perd la distinction de teinte sur laquelle repose le reste de la mise en page. Le contraste est nécessaire mais non suffisant : franchissez-le d’abord, jugez la typographie ensuite.
Vérifier du texte sur images et dégradés
La formule prend deux couleurs pleines, et un texte posé sur une photographie ou un dégradé n’a pas un fond : il en a un différent derrière chaque lettre. L’approche pratique consiste à tester face au point le plus clair et au point le plus sombre que le texte traverse réellement ; si l’un des deux échoue, c’est la mise en page qu’il faut corriger, pas la couleur du texte. Les remèdes habituels sont un voile semi-transparent entre l’image et le texte, un bandeau plein derrière le bloc, ou une ombre portée — chacun créant de fait un fond maîtrisable, donc mesurable. Ne tester que face à la luminosité moyenne de l’image est ce qui produit des titres qui s’évanouissent sur une zone claire de ciel.
Erreurs courantes à éviter
- Juger le contraste à l’œil sur un bon écran dans une pièce lumineuse. C’est la condition la plus indulgente que votre design rencontrera ; le seuil existe pour la personne qui lit sur un téléphone en plein soleil ou avec une vue diminuée.
- Vérifier le titre et supposer que le corps de texte va bien. Le grand texte franchit 3:1 quand le texte normal exige 4,5:1 — la même couleur peut passer pour l’un et échouer pour l’autre sur la même page.
- Ne contrôler que les couleurs de texte. Bordures de champs, anneaux de focus et icônes porteuses de sens ont leur propre exigence de 3:1, qu’un audit centré sur le texte manque entièrement.
- Mesurer un texte sur photo face à la luminosité moyenne de l’image. Testez face aux points le plus clair et le plus sombre que le texte traverse, ou ajoutez un voile pour disposer d’un fond unique mesurable.
- Considérer la conformité comme la fin de la question. 4,5:1 est un plancher — une police filiforme, un interlignage serré ou une association rouge-vert peuvent rester difficiles à lire à un rapport techniquement conforme.
Comparaison
| KeroTools | Outils de développement du navigateur | Extensions de design | |
|---|---|---|---|
| AA et AAA ensemble | Oui | En général AA seul | Variable |
| Texte normal et grand | Les deux affichés | Parfois | En général |
| Utilisable avant de développer | Oui | Non — exige une page rendue | Oui |
| Valeurs envoyées à un serveur | Jamais | Non | Selon l’extension |
| Compte ou licence | Ni l’un ni l’autre | Ni l’un ni l’autre | Souvent exigé |
| Coût | Gratuit | Gratuit | Gratuit / payant |
Fonctionnalités
Calcul du rapport WCAG
La formule officielle de luminance relative, et non une approximation à l’œil.
Niveaux AA et AAA
Les deux niveaux de conformité sont évalués : vous savez de quelle marge dispose un couple.
Texte normal et grand
Le grand texte a un seuil plus bas ; les deux sont affichés plutôt que de vous laisser retenir lequel s’applique.
Texte d’exemple en direct
De vrais caractères dans le couple testé, ce qui révèle des problèmes qu’un simple nombre laisse passer.
Ajuster et revérifier aussitôt
Déplacez l’une des couleurs et observez le rapport bouger, pour trouver la plus petite modification conforme.
Saisie HEX
Collez les codes directement depuis une charte ou une feuille de style.
Aucune installation
Rien à télécharger ni à installer : tout se passe sur la page web.
Compatible arabe et RTL
Interface complète en huit langues, dont l’arabe de droite à gauche.
Sécurisé par défaut
Servi en HTTPS, sans suivi de fichiers ni envoi à un tiers.
Qui l’utilise
Développeurs front-end
Trancher une question de couleur par un rapport mesuré plutôt que par un débat en revue de maquette.
Designers
Trouver la nuance conforme la plus proche d’une couleur de marque avant qu’elle n’entre dans une bibliothèque de composants.
Équipes accessibilité et conformité
Documenter quels couples atteignent AA et lesquels demandent correction, avec les rapports exacts.
Secteur public et éducation
Satisfaire des exigences d’accessibilité qui relèvent de l’obligation légale et non de la préférence.
Questions Fréquentes
WCAG AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte ; AAA exige 7:1 et 4,5:1 respectivement.
Non. Tout s’exécute localement dans votre navigateur — rien n’est envoyé, stocké ni partagé.
Oui — entièrement gratuit, sans compte et sans limite.