Daltonisme et landing page : ne pas perdre 8 % de vos visiteurs à cause d’une couleur

Un badge « en stock » en vert, un badge « rupture » en rouge, positionnés côte à côte sans autre différence visuelle. Pour la plupart des visiteurs, la distinction est immédiate. Pour près d’un homme sur douze, les deux badges se ressemblent à s’y méprendre — et l’information qu’ils étaient censés transmettre disparaît purement et simplement, sans qu’aucune erreur ne s’affiche, sans qu’aucun signal n’alerte qui que ce soit dans l’équipe qui a conçu la page. C’est le problème du daltonisme sur une landing page : il ne casse rien visiblement, il retire silencieusement de l’information à une partie du trafic.

Ce que dit la recherche sur la prévalence du daltonisme

Le chiffre surprend souvent tant il est élevé : selon la synthèse de référence de Michael P. Simunovic, « Colour Vision Deficiency », publiée en 2010 dans la revue Eye, le déficit congénital de la vision des couleurs touche jusqu’à 8 % des hommes et 0,5 % des femmes — un écart qui s’explique par la transmission génétique liée au chromosome X des formes les plus courantes. Contrairement à l’image d’un monde « en noir et blanc » que le mot « daltonisme » évoque à tort, l’immense majorité des cas concerne une difficulté à distinguer certaines nuances de rouge, de vert, d’orange et de marron entre elles — exactement la palette la plus utilisée en conception d’interface pour coder succès, erreur, urgence ou disponibilité.

Sur un trafic B2B typique, où les décideurs techniques et les acheteurs sont statistiquement plus souvent des hommes, cela représente une part de visiteurs directement comparable en volume à n’importe quel segment que vous cibleriez sciemment par ailleurs — sauf que celui-ci ne remplit jamais de formulaire de segmentation et reste invisible dans Google Analytics.

Pourquoi « rendre la couleur plus vive » ne suffit pas

Le réflexe le plus courant, une fois le problème identifié, consiste à intensifier la couleur : un rouge plus saturé, un vert plus franc, en pariant que la différence deviendra perceptible pour tout le monde. Une étude publiée en 2023 dans PLOS ONE par Amithavikram R. Hathibelagal, « The Impact of Display Saturation on Visual Search Performance in Congenital Colour Vision Deficiency », a testé précisément cette hypothèse : chez les participants avec une vision normale des couleurs, augmenter la saturation améliore nettement la vitesse de recherche visuelle ; chez les participants daltoniens, l’étude ne relève aucune amélioration significative entre l’image d’origine et sa version à saturation renforcée. Autrement dit, pousser le curseur de saturation ne résout rien pour les personnes concernées — cela ne fait qu’accentuer le contraste pour celles qui n’en avaient pas besoin. La seule correction qui fonctionne réellement consiste à ajouter un second canal d’information, indépendant de la teinte.

Les endroits d’une landing page où la couleur porte seule le message

Ce défaut se glisse rarement dans un choix de couleur isolé — il apparaît chaque fois qu’une distinction fonctionnelle repose entièrement sur la teinte, sans texte, icône ni forme pour la doubler :

• Les badges de disponibilité — « en stock » en vert et « rupture » ou « bientôt épuisé » en rouge, souvent de taille et de forme identiques, où seule la couleur distingue les deux états.
• La validation de formulaire — un contour de champ qui passe simplement du gris au rouge en cas d’erreur, sans icône ni message explicite à proximité immédiate (voir notre guide sur la validation en temps réel des formulaires).
• Le tableau de prix qui met en avant l’offre recommandée par un simple liseré ou un fond vert, sans badge textuel « le plus choisi » — l’effet de compromis qu’il cherche à créer disparaît alors pour une partie des visiteurs, un piège détaillé dans notre article sur le tableau de prix et l’effet de compromis.
• Les compteurs d’urgence et jauges de progression — une barre qui passe du vert à l’orange puis au rouge à mesure qu’un stock ou une offre s’épuise, sans indication chiffrée qui accompagne le changement de couleur.
• Les graphiques « avant / après » ou comparatifs — deux courbes ou deux barres distinguées uniquement par leur teinte, sans motif, épaisseur de trait ou étiquette qui permette de les identifier autrement.

Corriger : toujours coupler la couleur à un second signal

La règle qui règle l’essentiel des cas tient en une phrase : la couleur peut renforcer une information, elle ne doit jamais être le seul moyen de la transmettre. En pratique, cela se traduit par quelques réflexes simples à appliquer sur chaque élément qui utilise le code rouge/vert :

• Ajouter une icône ou un symbole distinct — une coche pour la disponibilité, une croix ou un point d’exclamation pour l’erreur ou la rupture, reconnaissables même en niveaux de gris.
• Ajouter un mot — « En stock » ou « Rupture » écrit en toutes lettres à côté du badge coloré, plutôt que la couleur seule qui porte tout le message.
• Varier la forme, pas seulement la teinte — sur un graphique, un trait plein contre un trait pointillé, un motif hachuré contre un aplat, une forme carrée contre une forme ronde.
• Garantir un contraste suffisant sur chaque état — un ratio de contraste texte/fond d’au moins 4,5:1 (norme WCAG), qui profite à toutes les formes de déficience visuelle, pas seulement au daltonisme ; notre guide sur la landing page accessible (RGAA, WCAG) détaille la méthode de vérification.
• Éviter la juxtaposition directe rouge vif / vert vif sans séparation ni bordure, la combinaison la plus difficile à distinguer pour les formes les plus courantes de daltonisme (deutéranomalie et protanomalie).

Tester sa landing page en quelques minutes

Pas besoin d’un panel d’utilisateurs pour repérer les points faibles les plus évidents. Trois vérifications rapides suffisent avant publication :

1. Activer un simulateur de daltonisme — l’onglet « Rendering » des outils de développement Chrome ou Firefox propose une émulation directe des déficiences visuelles (« Vision deficiencies »), sans installer d’extension.
2. Repasser la page en niveaux de gris (capture d’écran + filtre de désaturation) : si deux éléments censés porter des informations différentes deviennent indiscernables, c’est qu’ils reposaient uniquement sur la teinte.
3. Faire relire la page, même rapidement, par une personne concernée dans votre entourage professionnel si l’occasion se présente — aucun simulateur ne remplace un retour réel, mais il permet de trier les correctifs prioritaires avant d’aller plus loin.

Erreurs fréquentes

• Confondre daltonisme et cécité aux couleurs totale — l’achromatopsie complète est extrêmement rare ; l’immense majorité des cas concerne une difficulté à distinguer certaines nuances, pas une absence totale de perception colorée, ce qui rend le problème plus facile à sous-estimer visuellement en interne.
• Tester uniquement avec l’équipe en interne — statistiquement, sur une petite équipe de conception majoritairement féminine ou peu nombreuse, la probabilité qu’un daltonien s’y trouve et remonte le problème avant mise en ligne reste faible.
• Corriger le CTA principal et oublier le reste de la page — les badges de statut, les formulaires et les tableaux comparatifs sont statistiquement plus souvent fautifs que le bouton d’appel à l’action, déjà largement passé au crible dans notre article sur la couleur du bouton CTA.
• Se reposer sur la seule augmentation de saturation — comme le montre l’étude de 2023 citée plus haut, ce réflexe n’apporte aucun bénéfice mesuré aux personnes daltoniennes, seulement un contraste plus marqué pour les autres.

Concevoir sans jamais reposer une information sur la couleur seule ne coûte rien de plus au moment de la conception — un mot, une icône, une forme suffisent — et ne retire jamais rien à la lisibilité pour le reste du trafic. Les 10 templates LanderKit (89 € l’unité, 229 € le pack complet) associent systématiquement icônes et libellés textuels à leurs badges de statut et à leurs états de formulaire, sans jamais coder une information uniquement par la teinte : c’est directement vérifiable sur le tableau de prix du template SaaS waitlist ou sur les badges de disponibilité du template e-commerce produit.