Critère 3.2
Contraste du texte
Le contraste entre la couleur du texte et son arrière-plan doit être suffisant.
En Bref : L'essentiel à retenir
- Pour améliorer la lisibilité des textes pour les personnes malvoyantes, il faut respecter les ratios de contraste minimums.
- Le ratio de contraste minimal est de 4.5:1 pour les textes normaux et de 3:1 pour les grands textes.
- Vérifiez le contraste avec des outils comme la « Pipette » de RGAA Checker ou les DevTools du navigateur.
- Pour le texte sur les images, assurez-vous de leur lisibilité en utilisant un voile sombre ou une ombre portée.
Objectif
Assurer la lisibilité du texte pour les personnes malvoyantes ou dans des conditions de luminosité difficiles (soleil sur écran).
Solution Technique
Respectez les ratios de contraste minimums :
- 4.5:1 pour le texte normal (taille < 24px ou < 18.5px gras).
- 3:1 pour le grand texte (taille ≥ 24px ou ≥ 18.5px gras).
Comment vérifier ?
Utilisez l'outil "Pipette" de RGAA Checker ou les DevTools du navigateur.
/* Exemple de bon contraste */
body {
background-color: #ffffff;
color: #333333; /* Ratio 12.6:1 ✅ */
}
/* Exemple de mauvais contraste */
.muted {
color: #999999; /* Ratio sur blanc : 2.8:1 ❌ (Insuffisant) */
}
Textes sur images
Si vous placez du texte sur une image, assurez-vous qu'il reste lisible quelle que soit l'image (utilisez un voile sombre ou une ombre portée).