Un faible contraste rend la lecture difficile pour les personnes ayant des déficiences visuelles et nuit à l’expérience utilisateur.
✅ Bonnes pratiques pour la gestion des contrastes (accessibilité web)
🎯 Objectif
Garantir que les textes sont lisibles par tous les utilisateurs, y compris ceux ayant une déficience visuelle, en respectant les critères de contraste du WCAG (Web Content Accessibility Guidelines).
1. Utilisez des contrastes suffisants
-
Contraste minimum requis :
-
4.5:1 pour du texte normal (jusqu’à 18 px ou 14 px gras).
-
3:1 pour les grands textes (au-dessus de 18 px ou 14 px en gras).
-
-
Utilisez des outils comme WebAIM Contrast Checker pour tester vos couleurs.
2. Évitez les textes chevauchant des images ou vidéos
-
Si vous utilisez une image ou vidéo en arrière-plan :
-
Ajoutez une surcouche semi-transparente foncée ou claire, par exemple via l'utilisation du bloc "Bannière".
-
Ou placez le texte dans une boîte avec fond uni opaque.
-
3. Ne vous fiez pas uniquement à la perception visuelle
-
Ce n’est pas parce que le contraste vous semble suffisant qu’il l’est pour tout le monde.
-
Testez avec des simulateurs de daltonisme ou des extensions comme WAVE ou axe DevTools dans Chrome (pour utilisateur avancé).
4. Choisissez des couleurs de texte et de fond bien distinctes
-
Évitez les associations à faible contraste comme :
-
Gris clair sur fond blanc (#ccc sur #fff),
-
Jaune sur fond blanc ou clair (#ffff00 sur #f0f0f0),
-
Bleu clair sur fond blanc.
-
5. Respectez la cohérence de votre thème WordPress
-
Vérifiez les couleurs que vous utilisez dans l’éditeur de blocs Wordpress ou dans l'éditeur de contenu
-
Dans l’éditeur de contenu, privilégiez les couleurs cohérentes avec la charte graphique de votre site
7. Testez avec des personnes
-
Si possible, demandez à des utilisateurs ou collègues de lire vos pages avec différents niveaux de luminosité (écran au soleil, téléphone en mode sombre, etc.).