Ressources
Deux couleurs,
un rapport de contraste
Un texte lisible en grand peut devenir illisible en petit. Cet outil compare deux couleurs avec la formule du WCAG 2.2, affiche les quatre seuils, simule la vision de trois formes de daltonisme et propose un correctif qui garde votre teinte. Tout se calcule dans votre navigateur.
Le vérificateur
Entrez la couleur du texte et celle du fond, en hexadécimal ou au sélecteur. Le rapport s'affiche immédiatement, avec les quatre seuils et un aperçu aux trois tailles qui comptent : 30, 18 et 16 pixels.
6,22: 1
Contraste AA : conforme pour du texte courant.
- AA texte normal, 4,5:1
- AA grand texte, 3:1
- AAA texte normal, 7:1
- AAA grand texte, 4,5:1
Votre marque, de A à Z
Un titre de section à 24 px doit rester lisible sans effort, même sur un écran de téléphone en plein soleil.
Texte courant à 16 px : c'est la taille de la majorité des paragraphes, et celle qui échoue le plus souvent quand on choisit un gris trop clair.
Voir la paire comme
Tout le calcul se fait dans votre navigateur. Aucune couleur, aucun texte n'est envoyé à un serveur.
Les seuils à connaître
Le WCAG définit deux niveaux utiles au quotidien. AA est le niveau exigé par la plupart des référentiels publics, AAA le niveau confortable. Les valeurs dépendent de la taille du texte, parce qu'un caractère plus grand se lit avec moins de contraste.
| Usage | Niveau AA | Niveau AAA |
|---|---|---|
| Texte courant, moins de 24 px | 4,5:1 | 7:1 |
| Grand texte, 24 px ou gras 18,66 px | 3:1 | 4,5:1 |
| Composant d'interface, bordure, icône | 3:1 | non défini |
| Logo et logotype | exempté | exempté |
Pourquoi 4,5:1 et pas un chiffre au hasard
Le rapport de contraste compare la luminance relative des deux couleurs, pondérée selon la sensibilité de l'œil : 0,2126 pour le rouge, 0,7152 pour le vert, 0,0722 pour le bleu. Deux couleurs de même clarté perçue donnent un rapport proche de 1:1, donc illisible. Le blanc sur noir monte à 21:1, le maximum possible.
Le seuil de 4,5:1 vient des travaux de normalisation sur la lisibilité : il correspond au point où un texte de taille courante reste déchiffrable par une personne ayant une acuité visuelle réduite, sur un écran de qualité moyenne, dans une pièce éclairée normalement. Ce n'est pas une garantie de confort, c'est un plancher.
Les trois erreurs qui coûtent le plus
Le gris du texte secondaire. C'est la faute la plus fréquente : un gris clair pour hiérarchiser, qui passe sur grand écran et disparaît sur téléphone. Sur fond blanc, le dernier gris acceptable est autour de #767676.
Le texte sur photo. Un texte posé directement sur une image n'a pas de couleur de fond stable : selon la zone, le contraste varie du simple au triple. La solution tient en un voile sombre, une plaque, ou un dégradé local.
Le bouton corail sur fond blanc. Une couleur de marque vive passe souvent sous 4,5:1. On garde la teinte, on fonce le ton pour le texte du bouton, ou on remplit le bouton avec la couleur et on écrit en blanc par-dessus, en vérifiant que ce blanc tienne.
Comment l'utiliser
- Relevez les deux codes hexadécimaux réels, pas une approximation à l'œil.
- Testez la paire principale, puis les paires secondaires : légendes, placeholders, liens.
- Passez en simulation de daltonisme : si le rapport s'effondre, la couleur seule ne porte pas l'information.
- Corrigez avec le ton proposé, ou changez la taille du texte si le seuil visé est AAA.
- Notez les valeurs retenues dans votre charte, pour ne pas les réinventer à chaque support.
Pour une vérification complète d'un site, le contraste ne suffit pas : il faut aussi la taille des zones cliquables, les textes alternatifs et la navigation au clavier. Le référentiel RGAA détaille ces critères, et le test de logo du studio vérifie la tenue d'une marque à seize pixels.
Questions fréquentes
Quel rapport de contraste faut-il atteindre ?
4,5:1 pour du texte courant et 3:1 pour le grand texte, c'est le niveau AA du WCAG 2.2, celui que visent la plupart des sites publics et des appels d'offres. Le niveau AAA monte à 7:1 et 4,5:1. En dessous de 3:1, un texte n'est plus lisible pour une partie des visiteurs.
Le contraste s'applique-t-il aussi aux boutons et aux icônes ?
Oui, mais les seuils diffèrent. Un composant d'interface, bordure de champ ou icône porteuse de sens demande 3:1 contre ce qui l'entoure. Le texte dans un bouton reste soumis à 4,5:1. Un logo, lui, est exempté : c'est une image de marque, pas du texte.
Pourquoi mon gris semble-t-il correct à l'écran et échoue au test ?
Parce qu'un écran bien réglé, en intérieur, pardonne beaucoup. Le calcul ne pardonne rien : il compare les luminances réelles. Un gris #767676 sur blanc passe tout juste à 4,54:1 ; un gris #808080 tombe à 3,95:1 et échoue, alors qu'il paraît presque identique à l'œil.
Le simulateur de daltonisme est-il une mesure médicale ?
Non. C'est une approximation d'affichage, utile pour repérer une paire de couleurs qui s'effondre quand les teintes se rapprochent. Environ 8 % des hommes européens ont une déficience de la vision des couleurs, la plus fréquente étant la deutéranopie.
Mes couleurs sont-elles envoyées quelque part ?
Non. Le calcul se fait dans votre navigateur, aucune valeur n'est transmise à un serveur. Il n'y a ni compte, ni quota, ni historique conservé.
Et si je dois changer ma charte graphique pour passer le test ?
Ce n'est presque jamais nécessaire. Dans la majorité des cas, on garde la teinte et on fonce ou on éclaircit le ton de quelques pour cent. Le bouton de correction proposé plus haut fait exactement ça.
Un doute sur votre charte actuelle ? Le test de logo vérifie la lisibilité à 16 pixels, et la page identité de marque détaille ce qui est livré, contrastes et déclinaisons compris.