Couleurs non accessibles : erreurs fréquentes sur les sites web
Identifiez et corrigez les erreurs d'accessibilité couleur les plus courantes. Guide pratique pour éviter les pièges qui rendent vos sites inaccessibles.
Essayez notre outil gratuit
Aucune inscription requise, traitement 100% local.
Chaque jour, des millions d'utilisateurs quittent des sites web frustrés parce qu'ils ne peuvent pas lire le contenu. La cause ? Des erreurs d'accessibilité couleur que les designers répètent inconsciemment. Ces erreurs ne sont pas des cas limites obscurs — ce sont des pratiques courantes qui semblent professionnelles mais qui excluent une partie significative de l'audience.
Le plus troublant est que ces erreurs sont souvent commises par des équipes talentueuses. Le designer valide les couleurs sur son écran Retina calibré. Le développeur implémente fidèlement la maquette. Le client approuve le résultat. Personne ne réalise que 15% des visiteurs auront des difficultés à utiliser le site.
Ce guide catalogue les erreurs d'accessibilité couleur les plus fréquentes et vous donne les solutions concrètes pour chacune. Vous apprendrez à repérer ces pièges dans vos propres designs et à les corriger avant qu'ils n'impactent vos utilisateurs.
Sommaire
Erreur #1 : Le texte gris clair sur fond blanc
C'est l'erreur la plus répandue du web moderne. Le gris clair (#9ca3af, #a1a1aa, #94a3b8) est devenu synonyme de design épuré et sophistiqué. Le problème : ces gris ont un ratio de contraste d'environ 2.5:1 à 3:1 sur fond blanc — bien en dessous du minimum de 4.5:1.
Cette pratique est si normalisée qu'elle est devenue un défaut dans de nombreux frameworks CSS. Les placeholders, les labels secondaires, les textes d'aide utilisent tous ces gris illisibles. Des millions de sites les copient sans questionner.
La solution est simple : foncez vos gris. Un #6b7280 offre un ratio de 5.0:1, reste élégant, et est lisible. Pour les textes vraiment secondaires, descendez à #4b5563 (ratio 7.1:1). Le design reste épuré, mais accessible.
Erreur #2 : Les couleurs de marque utilisées pour le texte
Votre bleu de marque (#3b82f6) est parfait pour les logos et les accents décoratifs. Mais sur fond blanc, son ratio de contraste est de 3.1:1 — insuffisant pour du texte. Pourtant, combien de sites utilisent leur couleur de marque pour les liens, les titres, les boutons ?
Le orange est encore pire. Un orange vif typique (#f97316) a un ratio de seulement 2.0:1 sur blanc. Les marques utilisant l'orange comme couleur principale sont particulièrement exposées à ce problème.
Créez des variantes de vos couleurs de marque spécifiquement pour l'usage typographique. Un bleu à 700 ou 800 de saturation conserve l'identité de marque tout en étant accessible. Documentez ces variantes dans votre design system.
Erreur #3 : L'information transmise uniquement par la couleur
8% des hommes sont daltoniens. Si votre site utilise le rouge pour 'erreur' et le vert pour 'succès' sans autre indicateur, ces utilisateurs ne peuvent pas distinguer les deux états. C'est une violation directe des guidelines WCAG.
Les graphiques sont particulièrement problématiques. Un camembert avec 5 couleurs peut être impossible à interpréter pour un daltonien si les légendes ne sont pas explicites. Les courbes de données qui se distinguent uniquement par la couleur posent le même problème.
Ajoutez toujours un indicateur secondaire : une icône, un motif, une bordure, un texte. Le feu tricolore fonctionne même pour les daltoniens parce que la position du feu allumé (haut, milieu, bas) porte l'information, pas seulement la couleur.
Erreur #4 : Les liens invisibles dans le texte
Un lien doit être identifiable par autre chose que la couleur seule. Un lien bleu dans un paragraphe noir est accessible pour la plupart des utilisateurs, mais pas pour les daltoniens ni pour les utilisateurs consultant le site en niveaux de gris.
La pratique de retirer le soulignement des liens 'pour un design plus propre' est une erreur d'accessibilité. Le soulignement est le seul indicateur universel qui fonctionne indépendamment de la perception des couleurs.
Si vous tenez à supprimer le soulignement, ajoutez un autre indicateur : une couleur de fond au hover, une bordure, un changement d'épaisseur. Et assurez-vous que le lien a un contraste suffisant avec le texte environnant.
Erreur #5 : Les états de formulaire indistinguables
Le champ valide est vert, le champ invalide est rouge. Simple ? Non. Pour un daltonien protanope ou deutéranope, ces deux couleurs sont quasiment identiques. Votre formulaire devient impossible à corriger.
Les placeholders en gris clair qui disparaissent à la saisie posent aussi problème. L'utilisateur ne sait plus ce qu'il est censé entrer si le label n'est pas visible ou si le placeholder était l'unique indication.
Utilisez des icônes, des bordures épaisses, des textes d'aide explicites. Un champ invalide doit avoir une icône d'erreur, un message textuel, ET une couleur distincte. La redondance garantit l'accessibilité.
Erreur #6 : Le texte sur image sans protection
Un texte blanc sur une image de fond peut être parfaitement lisible sur les zones sombres de l'image et complètement invisible sur les zones claires. Pourtant, cette pratique est omniprésente dans les hero banners et les sliders.
Les overlays semi-transparents ne suffisent pas toujours. Un overlay noir à 40% d'opacité sur une image très claire peut encore être insuffisant. Le seul moyen fiable est de tester le contraste sur la zone la plus claire de l'image.
Solutions : overlay solide ou très opaque, dégradé assurant une zone sombre prévisible, fond semi-transparent derrière le texte, ou limitation du texte aux zones contrôlées de l'image. Évitez le texte flottant sur images variables.
Comment faire en 3 étapes
Auditez votre site avec notre analyseur WCAG. L'outil identifie automatiquement les combinaisons texte/fond qui échouent aux tests de contraste.
Listez toutes les erreurs identifiées par catégorie : gris trop clairs, couleurs de marque, texte sur image, etc.
Pour chaque erreur, définissez la correction : nouvelle couleur, ajout d'indicateur secondaire, overlay sur image.
Testez les corrections avec notre simulateur de daltonisme pour vérifier que l'information reste accessible sans perception normale des couleurs.
Documentez les standards dans votre design system pour prévenir la récurrence de ces erreurs.
Conseils de pro
- Ajoutez un test de contraste à votre checklist de review de design — avant même la review de code.
- Installez une extension de simulation de daltonisme dans votre navigateur et consultez vos designs régulièrement avec.
- Les erreurs d'accessibilité couleur sont souvent les mêmes d'un projet à l'autre — créez un template de design system accessible.
- Formez votre équipe : une heure de sensibilisation à l'accessibilité couleur économise des semaines de corrections.
Erreurs fréquentes à éviter
- ✗Croire que 'ça passe visuellement' signifie que c'est accessible — les outils de mesure sont plus fiables que l'œil.
- ✗Corriger uniquement les erreurs signalées par les outils automatiques, qui ne détectent pas tous les problèmes (comme l'information transmise uniquement par la couleur).
- ✗Appliquer des corrections locales sans mettre à jour le design system, permettant aux erreurs de se reproduire.
- ✗Tester uniquement avec les types de daltonisme les plus courants, oubliant les formes rares mais existantes.
- ✗Considérer l'accessibilité comme une tâche finale plutôt qu'une contrainte de design dès le départ.
- ✗Supposer que les composants de bibliothèques tierces sont accessibles par défaut.
Outils complémentaires
Questions fréquentes
Articles connexes
Comment respecter les règles WCAG avec les couleurs ?
Guide complet pour mettre en conformité vos couleurs avec les normes WCAG. Critères, outils et bonnes pratiques pour une accessibilité garantie.
Couleurs non adaptées au web : problèmes courants
Identifiez et corrigez les problèmes de couleurs web les plus fréquents. Guide de diagnostic et solutions pour des couleurs qui fonctionnent.
Prêt à essayer ?
Notre outil est gratuit, sans inscription et respectueux de votre vie privée.
Essayer Analyseur WCAG maintenant