GUIDES PRATIQUES · Web et codes
Vérifier le contraste du texte sans fausser le seuil
Deux couleurs différentes peuvent produire un texte difficile à lire. Mesurez la paire réelle, puis examinez taille du texte, composition du fond et états de l’interface.
1. Relever les couleurs effectives
Identifiez la couleur des lettres et leur fond immédiat. Une palette générale ne suffit pas : le même texte peut apparaître sur plusieurs surfaces.
L’outil compare deux couleurs hexadécimales opaques. Il n’analyse pas automatiquement la page et ne reconstitue pas transparences, images ou dégradés sous le texte.
2. Choisir le bon critère
WCAG AA demande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. La catégorie dépend de la taille et de la graisse définies, pas simplement du statut de titre.
Pour l’écriture latine, le grand texte correspond à au moins 18 points en normal ou 14 en gras, avec équivalences pour les autres écritures. En cas de doute, vérifiez le seuil plus strict.
Test du contraste des couleurs WCAG3. Lire rapport et verdict ensemble
Saisissez les deux couleurs et lisez le verdict de la catégorie concernée. Un rapport affiché avec deux décimales peut masquer un écart près du seuil.
N’arrondissez pas vers le haut pour déclarer une réussite. L’outil applique les seuils avant l’arrondi d’affichage ; consultez donc aussi le verdict.
ESSAYEZ CETTE ÉTAPE
Test du contraste des couleurs WCAG
Utilisez ici le calculateur complet : chargez les valeurs de l’exemple, modifiez une donnée à la fois puis comparez le résultat aux étapes du guide.
Un exemple reproductible
Chargez #777777 sur #FFFFFF : environ 4,48:1, insuffisant pour AA du texte normal. Remplacez seulement le texte par #767676 : environ 4,54:1, suffisant pour ce seuil. Le verdict utilise le rapport non arrondi.
Résultat
Le résultat apparaîtra ici.
4. Exemple : deux gris très proches
Sur blanc, #777777 donne environ 4,48:1 et échoue à AA pour le texte normal. #767676 donne environ 4,54:1 et atteint ce seuil. L’écart visuel est petit, le critère est précis.
Deux gris sur le même blanc
- Données de départ
- Fond #FFFFFF ; texte #777777 ou #767676
- Résultat
- Environ 4,48:1 : échec AA normal. Environ 4,54:1 : réussite AA normal.
Les échantillons sont démonstratifs. Les libellés donnent couleurs, rapports et résultats sans dépendre uniquement de leur apparence.
-
#777777 sur #FFFFFF
Environ 4,48:1 : insuffisant pour AA normal.
-
#767676 sur #FFFFFF
Environ 4,54:1 : atteint ce seuil.
5. Refaire le test selon thèmes et états
Contrôlez texte courant, liens, texte secondaire et libellés des boutons sur leurs fonds réels. Recommencez en thème sombre et dans les états pertinents, sans supposer qu’une inversion suffit.
Un fond variable nécessite les combinaisons effectives, y compris la moins favorable. Un seul point prélevé sur une image ne représente pas toute sa surface.
| Critère | Rapport minimal |
|---|---|
| AA normal | 4,5:1 |
| AA grand texte | 3:1 |
| AAA normal | 7:1 |
6. Évaluer au-delà du rapport
Un résultat suffisant ne démontre pas l’accessibilité complète. Taille, graisse, espacement, sens et recours au seul code couleur demandent d’autres vérifications.
Si vous êtes juste au-dessus du seuil, envisagez une marge plus grande. Un résultat indiqué par couleur doit conserver un libellé ou une forme qui porte aussi son sens.
Il s’agit de données d’exemple, pas de mesures d’un cas réel. Le résultat utilise le même moteur que l’outil complet. Comparez-le aux étapes du guide puis cochez les vérifications après contrôle.
Sources et méthode
Questions fréquentes
Un résultat suffisant certifie-t-il la conformité WCAG ?
Non. Il vérifie ce contraste, avec ces couleurs et conditions. Les autres exigences nécessitent des évaluations séparées.
Peut-on saisir une couleur transparente ?
Il faut la couleur effective après composition sur le fond. Ce test de deux couleurs opaques ne reconstitue pas toute la page.