Le texte du site est-il suffisamment contrasté par rapport à la couleur de fond pour être lisible par tous ?
Critère officiel 3.2 — Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
Pourquoi c'est important
Un texte peu contrasté est illisible pour les personnes malvoyantes, les personnes âgées, et pour tout le monde dans des conditions difficiles — téléphone en plein soleil, écran de mauvaise qualité, yeux fatigués. C'est le critère le plus fréquemment échoué sur les sites de communes.
Exemples concrets
Ce qui est conforme
Le texte principal du site est en gris très foncé (#333333) sur fond blanc : le rapport de contraste est de 12:1, bien au-dessus du minimum légal de 4,5:1. Il est lisible dans toutes les conditions.
Ce qui pose problème
Le texte des horaires d'ouverture est affiché en gris clair (#999999) sur fond blanc : le rapport de contraste est de 2,8:1, en dessous du minimum légal. Il est difficile à lire même pour des personnes sans déficience visuelle.
Comment agir
Demandez à votre prestataire un rapport de contraste de toutes les couleurs de texte utilisées sur le site. L'outil gratuit Colour Contrast Analyser (à télécharger) ou WebAIM Contrast Checker (en ligne) permettent de vérifier en quelques secondes. Les corrections sont souvent rapides : changer une valeur de couleur dans la feuille de style.
Règles clés
- Texte normal (< 18px non gras, < 14px gras) : ratio minimum 4,5:1.
- Texte grand (≥ 18px non gras, ou ≥ 14px gras) : ratio minimum 3:1.
- Le ratio se calcule entre la couleur du texte et la couleur de fond directement adjacent — pas la couleur de fond de la page.
- Les textes purement décoratifs (logos dans lesquels le texte n'est pas porteur d'information lisible), les textes inactifs (champs désactivés), et les logotypes sont exemptés.
- Le placeholder d'un champ de formulaire est du texte à part entière — le ratio 4,5:1 s'applique.
- Toujours vérifier tous les états interactifs : default, hover, focus, visited, disabled.
- Outils de vérification : Colour Contrast Analyser (app desktop), axe DevTools, WAVE.
Erreurs fréquentes
- Texte de placeholder gris clair sur fond blanc (ratio souvent < 3:1)
- Texte blanc sur fond coloré pastel ou dégradé dont le ratio est insuffisant
- Texte gris discret pour les mentions légales, prix barrés, labels secondaires
- Liens non visités et liens visités avec des couleurs de faible contraste
- Texte sur image ou texture de fond sans vérification du ratio dans les zones de chevauchement
- États hover et focus avec changement de couleur qui fait chuter le contraste en dessous du seuil
- Texte dans des illustrations SVG ou Canvas non vérifié
Exemples de code
texte secondaire trop clair
✗ Non conforme/* Texte de légende ou mention secondaire */
.text-muted {
color: #999999; /* sur fond #ffffff */
/* Ratio : 2,85:1 — insuffisant pour texte normal */
}#999999 sur #ffffff donne un ratio de 2,85:1 — bien en dessous du seuil de 4,5:1. Très fréquent dans les designs 'modernes' qui misent sur la discrétion des textes secondaires.
texte secondaire corrigé
✓ Conforme/* Texte secondaire accessible */
.text-muted {
color: #767676; /* sur fond #ffffff */
/* Ratio : 4,54:1 — conforme pour texte normal */
}
/* Ou plus foncé pour une marge de sécurité */
.text-muted-safe {
color: #6b6b6b; /* sur fond #ffffff */
/* Ratio : 5,07:1 */
}#767676 est la valeur limite exacte pour atteindre 4,5:1 sur fond blanc. Utiliser #6b6b6b ou plus foncé pour avoir une marge de sécurité lors des variations de rendu entre navigateurs.
placeholder de champ
✗ Non conformeinput::placeholder {
color: #aaaaaa; /* sur fond #ffffff */
/* Ratio : 2,32:1 — insuffisant */
}Le placeholder est du texte porteur d'information (format attendu, exemple) — il doit respecter le ratio 4,5:1. La plupart des styles de placeholder par défaut échouent ce critère.
placeholder accessible
✓ Conformeinput::placeholder {
color: #767676; /* sur fond #ffffff */
/* Ratio : 4,54:1 — conforme */
}Même exigence que pour le texte courant. Le placeholder reste visuellement distinct du texte saisi si le texte saisi est plus foncé (ex. : #1a1a1a).
texte blanc sur fond coloré
✗ Non conforme/* Bouton CTA avec fond vert pastel */
.btn-success {
background-color: #5cb85c;
color: #ffffff;
/* Ratio blanc/#5cb85c : 2,99:1 — insuffisant */
}Le vert Bootstrap classique (#5cb85c) avec texte blanc ne passe pas le ratio 4,5:1. Erreur très fréquente sur les boutons 'succès' ou 'valider' de frameworks CSS.
texte blanc sur fond coloré — corrigé
✓ Conforme/* Fond assombri pour passer le seuil */
.btn-success {
background-color: #3a7a3a;
color: #ffffff;
/* Ratio blanc/#3a7a3a : 5,01:1 — conforme */
}
/* Ou texte foncé sur fond clair */
.btn-success-alt {
background-color: #d4edda;
color: #155724;
/* Ratio #155724/#d4edda : 7,14:1 — très conforme */
}Deux stratégies : assombrir le fond pour conserver le texte blanc, ou utiliser un texte foncé sur fond clair. La seconde offre une marge plus large et fonctionne mieux en impression.
Référence WCAG : 1.4.3