Imaginez un site de mairie où les créneaux disponibles pour prendre rendez-vous apparaissent en vert et les créneaux complets en rouge. Ou un site d’office de tourisme où les itinéraires faciles, intermédiaires et difficiles sont différenciés uniquement par leur couleur. Pour la majorité des utilisateurs, l’information semble immédiatement compréhensible. Pour une personne atteinte de daltonisme, elle peut devenir beaucoup plus difficile à interpréter.
Le problème ne vient pourtant pas de la couleur elle-même. Un site accessible peut parfaitement utiliser du rouge, du vert, du bleu ou toute autre teinte. La difficulté apparaît lorsque la couleur devient le seul moyen permettant de comprendre une information, un état ou une action.
Pour une collectivité ou une destination touristique, le sujet concerne de nombreux contenus : formulaires, cartes, agendas, graphiques, systèmes de réservation, plans de transport, tableaux de bord ou encore documents téléchargeables.
Comment identifier les situations problématiques ? Quelles corrections apporter en priorité ? Voici dix améliorations concrètes permettant de rendre un site plus accessible aux personnes présentant une déficience de la vision des couleurs.
Le daltonisme : de quoi parle-t-on exactement ?
Le daltonisme, plus précisément appelé déficience de la vision des couleurs, correspond à une perception différente de certaines couleurs ou associations de couleurs. Selon le type de déficience, certaines teintes peuvent être difficiles à différencier.
Contrairement à une idée répandue, être daltonien ne signifie donc pas nécessairement voir le monde en noir et blanc. Les difficultés varient selon les personnes et les types de déficience.
Sur un site web, cela devient problématique lorsqu’une interface repose sur la capacité de l’utilisateur à reconnaître correctement une couleur.
Prenons un exemple simple. Un tableau de suivi des démarches administratives affiche trois états :
- vert pour une démarche terminée ;
- orange pour une démarche en cours ;
- rouge pour une démarche nécessitant une action.
Si aucune autre information n’est fournie, la compréhension du tableau dépend entièrement de la capacité à distinguer ces couleurs.
La solution n’est pas de supprimer les couleurs. Il suffit généralement d’ajouter une information complémentaire : « Terminée », « En cours » ou « Action requise ».
La couleur continue alors de renforcer visuellement l’information, sans devenir indispensable à sa compréhension.
Pourquoi le daltonisme peut-il compliquer l’utilisation d’un site web ?
Les interfaces numériques utilisent énormément la couleur pour communiquer rapidement.
Elle sert à signaler une erreur, identifier un bouton actif, distinguer plusieurs courbes sur un graphique, représenter différentes catégories sur une carte ou encore indiquer la disponibilité d’une prestation touristique.
Ces conventions sont pratiques lorsque la couleur vient compléter une information déjà disponible. Elles deviennent en revanche problématiques lorsqu’elle constitue l’unique clé de lecture.
Prendre rendez-vous sur le site d’une collectivité
Un habitant souhaite réserver un rendez-vous pour renouveler un document administratif.
Le calendrier présente des dates en vert pour les créneaux disponibles et en rouge pour les journées complètes. Aucun symbole ni texte ne distingue les deux situations.
Une personne ne percevant pas correctement la différence entre ces couleurs peut être obligée de sélectionner plusieurs dates pour identifier les créneaux disponibles.
Une interface qui semblait simple introduit alors une difficulté totalement évitable.
Consulter une carte touristique
Un randonneur prépare son séjour sur le site d’une destination touristique. Une carte classe les itinéraires en trois catégories : vert pour les parcours faciles, orange pour les parcours intermédiaires et rouge pour les parcours difficiles.
Si la légende et les tracés reposent uniquement sur cette palette, certains utilisateurs auront des difficultés à distinguer les parcours.
Il aurait suffi d’ajouter un symbole, un type de trait ou directement le niveau de difficulté sur la carte.
Corriger une erreur dans un formulaire
Autre situation fréquente : après validation d’un formulaire, un champ incorrect est simplement entouré d’une bordure rouge.
Pour une personne ne distinguant pas correctement cette couleur, l’erreur peut passer totalement inaperçue.
Une indication textuelle comme « Adresse e-mail incorrecte » résout immédiatement le problème.
Ces exemples illustrent un principe essentiel : l’accessibilité des couleurs ne concerne pas uniquement la charte graphique. Elle touche directement la compréhension et l’utilisation d’un service numérique.
Daltonisme et RGAA : que demandent réellement les règles d’accessibilité ?
Le RGAA traite spécifiquement la question de la couleur. Le principe est simple : une information ne doit pas être transmise uniquement grâce à la couleur.
Cette exigence découle également du critère 1.4.1 des WCAG, « Use of Color ». Les WCAG n’interdisent aucune couleur particulière ni aucune combinaison spécifique. Elles demandent que la couleur ne soit pas le seul moyen visuel permettant de transmettre une information, d’indiquer une action ou de distinguer un élément.
Une collectivité peut donc parfaitement conserver le rouge pour signaler une erreur ou le vert pour indiquer une validation. Il faut simplement que cette information reste compréhensible lorsqu’on ne perçoit pas la couleur.
Le RGAA définit également des exigences relatives aux contrastes, notamment entre le texte et son arrière-plan.
Attention toutefois à ne pas confondre deux problématiques.
Un contraste suffisant garantit qu’un texte ou certains composants restent suffisamment perceptibles par rapport à leur arrière-plan. Cela ne garantit pas nécessairement que deux couleurs utilisées pour représenter deux catégories différentes seront facilement distinguées par une personne daltonienne.
Le contraste et l’utilisation de la couleur doivent donc être vérifiés séparément. WebAIM distingue également explicitement ces deux dimensions dans ses recommandations.
1. Ne jamais transmettre une information uniquement par la couleur
C’est probablement la règle la plus importante.
Lorsqu’une information a une conséquence sur la compréhension ou l’action de l’utilisateur, celle-ci doit rester accessible indépendamment de la couleur.
Imaginons un agenda municipal indiquant :
« Les événements annulés apparaissent en rouge. »
La couleur devient ici indispensable pour comprendre l’information.
Une solution beaucoup plus robuste consiste à ajouter directement le statut :
« Concert du 12 septembre — Annulé ».
La couleur peut toujours être utilisée pour renforcer visuellement ce statut, mais elle n’est plus nécessaire pour le comprendre.
Ce principe doit être appliqué aux agendas, formulaires, tableaux, systèmes de réservation, alertes et tableaux de bord.
2. Ajouter des libellés explicites aux états et aux statuts
Les interfaces utilisent régulièrement des pastilles colorées pour indiquer un statut.
Une destination touristique peut par exemple afficher :
vert pour « disponible » ;
orange pour « presque complet » ;
rouge pour « complet ».
Une approche accessible consiste à conserver ces couleurs tout en ajoutant systématiquement les libellés correspondants.
Le principe peut être appliqué à une réservation d’activité touristique, au suivi d’une démarche administrative ou à l’état d’un équipement public.
Cette amélioration présente également un avantage en dehors de l’accessibilité : l’information devient immédiatement explicite pour tous les utilisateurs, sans qu’ils aient à apprendre la signification d’un code couleur.
3. Associer les couleurs à des formes, symboles ou pictogrammes
Lorsque plusieurs catégories doivent être distinguées visuellement, la couleur peut être complétée par un second indicateur.
Sur une carte touristique, les niveaux de difficulté d’un parcours pourraient par exemple utiliser :
- un cercle pour un parcours facile ;
- un triangle pour un parcours intermédiaire ;
- un carré pour un parcours difficile.
Les formes permettent de conserver une lecture visuelle rapide, même si les couleurs sont difficiles à différencier.
Le même principe fonctionne pour les graphiques, les tableaux de bord et les cartes.
Il convient toutefois de ne pas remplacer un problème par un autre. Certains pictogrammes peuvent être ambigus s’ils sont utilisés sans explication. Lorsque l’information est importante, un libellé textuel explicite reste généralement la solution la plus robuste.
4. Rendre les graphiques compréhensibles sans leur palette de couleurs
Les graphiques font partie des contenus les plus fréquemment concernés.
Imaginez un graphique présentant la fréquentation touristique de trois sites différents. Trois courbes rouges, vertes et orange sont accompagnées d’une légende située sous le graphique.
L’utilisateur doit constamment associer chaque couleur à une catégorie.
Une solution plus accessible consiste à utiliser plusieurs mécanismes simultanément : différents types de traits, des marqueurs distincts et des étiquettes directement placées à proximité des courbes.
Dans certains contextes, il est également pertinent de proposer les données sous forme de tableau accessible.
La question à se poser est simple : si toutes les courbes apparaissaient dans une teinte similaire, serait-il encore possible de comprendre le graphique ?
Si la réponse est non, la couleur joue probablement un rôle trop important.
5. Ne pas signaler les erreurs de formulaire uniquement en rouge
Les formulaires constituent des parcours particulièrement sensibles, notamment lorsqu’ils permettent d’effectuer une démarche administrative ou une réservation touristique.
Une pratique encore fréquente consiste à transformer la bordure d’un champ en rouge après une erreur.
Ce signal visuel peut être utile, mais il ne suffit pas.
WebAIM cite précisément ce type de cas : une bordure rouge seule ne permet pas de transmettre correctement l’information. Elle doit être complétée par un message ou un autre indicateur permettant d’identifier clairement l’erreur.
Par exemple :
Adresse e-mail
Format incorrect. Exemple attendu : nom@domaine.fr
L’utilisateur sait immédiatement quel champ doit être corrigé et pourquoi.
Cette pratique améliore l’accessibilité pour les personnes daltoniennes, mais également pour les personnes malvoyantes, les utilisateurs de lecteurs d’écran et, plus largement, tous ceux qui rencontrent une erreur dans le formulaire.
6. Vérifier les contrastes des textes et des composants d’interface
Un site peut respecter la règle « ne pas utiliser uniquement la couleur » tout en présentant des contrastes insuffisants.
Les contrastes doivent notamment être vérifiés sur les textes, les boutons, les liens, les messages d’alerte et certains composants d’interface.
Les WCAG prévoient notamment, pour le texte courant, un rapport de contraste minimum de 4,5:1, avec des règles spécifiques pour les textes de grande taille.
Le RGAA reprend une méthodologie précise pour mesurer ces rapports de contraste.
Dans la pratique, une vigilance particulière est nécessaire lorsque du texte est placé sur une photographie, lorsqu’une charte graphique utilise des couleurs très claires ou lorsque différents états d’un composant reposent sur de faibles variations de luminosité.
Il faut également rappeler qu’un contraste conforme ne signifie pas automatiquement qu’une interface est accessible aux personnes daltoniennes. Les deux contrôles restent complémentaires.
7. Ne pas différencier les états d’interface uniquement par leur couleur
Une couleur différente est souvent utilisée pour représenter l’état d’un composant.
Un onglet actif devient bleu. Un filtre sélectionné devient vert. Une date choisie dans un calendrier change de couleur.
Le problème apparaît lorsque cette modification constitue le seul indice permettant d’identifier l’état.
Plusieurs solutions sont possibles : ajouter une bordure, modifier la graisse du texte, afficher une coche ou compléter l’état par un libellé.
Prenons un système de filtres permettant de sélectionner des activités touristiques. Le filtre « Randonnée » ne devrait pas devenir uniquement vert lorsqu’il est sélectionné. Une coche accompagnant son libellé rend immédiatement son état compréhensible.
Cette approche permet également d’améliorer la lisibilité globale de l’interface.
8. Adapter les cartes et plans
Les collectivités et les destinations touristiques utilisent énormément de cartes : transports, stationnement, sentiers de randonnée, équipements publics, circuits cyclables, zones réglementées ou points d’intérêt.
Or les cartes sont souvent construites autour de codes couleur complexes.
L’utilisation de couleurs reste pertinente. Elle facilite la lecture rapide et peut enrichir l’expérience utilisateur. Mais elle doit être accompagnée d’autres repères.
WebAIM recommande précisément, lorsque plusieurs itinéraires sont distingués par couleur, d’ajouter par exemple des annotations, différents styles de traits ou une information textuelle complémentaire.
Une carte de randonnée peut ainsi combiner couleur, numéro de parcours et type de trait. Une carte de transport peut utiliser un numéro ou une lettre pour chaque ligne.
L’utilisateur n’a alors plus besoin de distinguer parfaitement les couleurs pour comprendre l’information.
9. Vérifier également les contenus produits par les contributeurs
Une interface techniquement accessible peut rapidement perdre une partie de cette qualité lorsque de nouveaux contenus sont publiés.
Le problème apparaît souvent dans les infographies, graphiques, PDF ou tableaux produits par les équipes de communication.
Un graphique réalisé dans un tableur puis transformé en image peut utiliser quatre couleurs sans aucune autre distinction. Une infographie publiée sur le site peut employer du rouge et du vert pour comparer deux catégories. Une brochure touristique peut afficher plusieurs itinéraires uniquement grâce à des codes couleur.
Les contributeurs ont donc un rôle essentiel dans le maintien de l’accessibilité.
Un test simple permet d’identifier de nombreux problèmes : afficher le contenu en niveaux de gris et vérifier s’il reste compréhensible.
WebAIM recommande cette approche pour détecter plus facilement les informations qui dépendent uniquement de la couleur.
Ce test ne remplace évidemment pas un audit d’accessibilité, mais il constitue une vérification éditoriale rapide et particulièrement utile.
10. Intégrer le daltonisme dans les tests avant publication
La dernière amélioration consiste à transformer ces bonnes pratiques en processus.
Lorsqu’une nouvelle interface, un graphique ou une carte est créé, la question de la couleur doit être vérifiée avant la mise en ligne.
Il est possible d’utiliser des simulateurs de déficiences de perception des couleurs pour identifier certaines associations problématiques. L’affichage en niveaux de gris constitue également un contrôle intéressant.
Mais ces outils ne doivent pas être considérés comme une preuve de conformité.
Le contrôle le plus important reste fonctionnel : l’information est-elle compréhensible lorsque la couleur disparaît ?
Pour les contenus stratégiques, quelques vérifications simples suffisent souvent :
- supprimer temporairement les couleurs ;
- contrôler les rapports de contraste ;
- vérifier les formulaires ;
- examiner les cartes et graphiques ;
- tester les différents états des composants.
Cette logique peut facilement être intégrée à une Definition of Done ou à une check-list de recette avant chaque mise en production.
Quels contenus vérifier en priorité sur le site d’une collectivité ?
Toutes les pages ne présentent pas le même niveau de risque.
Pour une collectivité, la priorité doit être donnée aux parcours où une mauvaise interprétation peut empêcher l’usager d’effectuer une démarche.
Les formulaires et démarches en ligne arrivent donc naturellement en tête. Les calendriers de rendez-vous, tableaux de suivi, alertes, cartes, plans de transport et informations liées aux services publics doivent également être contrôlés.
Les documents téléchargeables méritent une attention particulière. Une carte ou un graphique inaccessible intégré à un PDF reste inaccessible, même si le site qui permet de télécharger le document respecte par ailleurs les bonnes pratiques.
La priorité doit donc être donnée aux contenus ayant une incidence directe sur l’accès à un service ou à une information essentielle.
Quels contenus vérifier en priorité sur un site touristique ?
Les destinations touristiques utilisent particulièrement les contenus visuels.
Cartes, itinéraires, niveaux de difficulté, disponibilités, calendriers et systèmes de réservation représentent donc les premiers éléments à examiner.
Prenons le cas d’un site présentant différents itinéraires cyclables. Si le niveau de difficulté est uniquement matérialisé par la couleur du parcours sur une carte, l’utilisateur risque de choisir un itinéraire sans pouvoir identifier correctement son niveau.
Le problème peut facilement être corrigé en affichant directement les mentions « facile », « intermédiaire » ou « difficile », accompagnées éventuellement d’un pictogramme.
Les brochures et programmes téléchargeables doivent également être contrôlés. Dans une destination touristique, une part importante des contenus est encore diffusée sous forme de PDF ou d’images, formats dans lesquels les codes couleur sont très fréquents.
Une check-list rapide pour les contributeurs
Avant de publier un contenu, quelques questions permettent d’identifier rapidement les problèmes les plus fréquents :
- L’information reste-t-elle compréhensible sans les couleurs ?
- Les erreurs de formulaire disposent-elles d’un message explicite ?
- Les graphiques utilisent-ils autre chose que la couleur pour différencier leurs données ?
- Les cartes comportent-elles des symboles, numéros ou libellés complémentaires ?
- Les contrastes ont-ils été vérifiés ?
- Les états sélectionnés ou actifs disposent-ils d’un autre indicateur que la couleur ?
- Les infographies et PDF restent-ils compréhensibles en niveaux de gris ?
Cette vérification ne remplace pas un audit RGAA, mais elle permet aux équipes éditoriales d’éviter une grande partie des erreurs les plus courantes.
Comment intégrer durablement ces bonnes pratiques dans votre organisation ?
Corriger dix pages aujourd’hui ne garantit pas que le problème ne réapparaisse pas demain.
L’objectif doit donc être d’intégrer ces règles dans le fonctionnement normal de l’organisation.
La première étape concerne le design system. Les composants récurrents comme les alertes, formulaires, boutons, onglets ou tableaux devraient intégrer directement plusieurs moyens de distinguer leurs différents états.
La seconde concerne les contributeurs. Les modèles de graphiques, cartes et infographies peuvent être préparés à l’avance afin d’éviter que chaque collaborateur recrée ses propres codes couleur.
Enfin, ces exigences doivent apparaître dans les marchés web et les critères de recette. Une refonte est le meilleur moment pour formaliser les règles relatives aux couleurs, aux contrastes et aux différents états d’interface.
L’accessibilité devient alors une propriété du système, et non une série de corrections ajoutées en fin de projet.
Ce qu’il faut retenir sur le daltonisme et l’accessibilité web
Rendre une interface accessible aux personnes daltoniennes ne signifie pas supprimer les couleurs ou abandonner une identité graphique.
L’objectif est beaucoup plus simple : aucun utilisateur ne devrait avoir besoin d’identifier correctement une couleur pour comprendre une information indispensable ou utiliser un service.
Libellés, pictogrammes, formes, motifs, différents styles de traits et messages textuels permettent de sécuriser rapidement la majorité des situations.
Pour une collectivité ou une destination touristique, les formulaires, cartes, graphiques, calendriers et systèmes de réservation doivent être examinés en priorité.
Le principe peut finalement se résumer en une question : l’information reste-t-elle compréhensible si la couleur disparaît ?
Si la réponse est non, une amélioration est probablement nécessaire.
Pour conclure : la couleur doit renforcer l’information, pas la remplacer
Une interface accessible peut être colorée, esthétique et attractive.
L’enjeu n’est donc pas d’appauvrir le design, mais de s’assurer que la couleur reste un moyen supplémentaire de transmettre l’information plutôt qu’une condition nécessaire pour la comprendre.
Pour les collectivités comme pour les destinations touristiques, cette approche apporte un bénéfice immédiat : les interfaces deviennent plus robustes et souvent plus simples à comprendre pour l’ensemble des utilisateurs.
La bonne question à intégrer aux prochaines conceptions, recettes et publications est finalement très simple :
« Cette information reste-t-elle compréhensible si l’utilisateur ne distingue pas les couleurs comme nous l’avons prévu ? »
Lorsqu’une interface répond positivement à cette question, elle franchit déjà une étape importante vers une accessibilité numérique réellement intégrée au quotidien.
FAQ
Qu’est-ce que le daltonisme ?
Le daltonisme est une déficience de la vision des couleurs qui rend certaines couleurs ou associations de couleurs difficiles à distinguer. Sur un site web, le problème apparaît principalement lorsque la compréhension d’une information dépend de la capacité à identifier correctement une couleur.
Quelles couleurs faut-il éviter pour les personnes daltoniennes ?
Aucune couleur n’est interdite en elle-même. Les WCAG n’interdisent pas non plus spécifiquement l’association rouge et vert. Le principe consiste plutôt à ne jamais utiliser la couleur comme seul moyen de transmettre une information importante.
Peut-on utiliser du rouge et du vert sur un site accessible ?
Oui. Le rouge et le vert peuvent parfaitement être utilisés si l’information qu’ils représentent est également disponible autrement. Par exemple, une erreur peut être signalée en rouge à condition qu’un message textuel permette également d’identifier clairement le problème.
Le RGAA interdit-il d’utiliser la couleur pour transmettre une information ?
Non. La couleur peut participer à la transmission d’une information, mais elle ne doit pas en être l’unique vecteur. Une indication textuelle, une forme, un symbole ou un autre repère doit permettre de comprendre l’information indépendamment de la couleur.
Le contraste suffit-il pour rendre une interface accessible aux daltoniens ?
Non. Le contraste et la perception des couleurs sont deux problématiques distinctes. Une interface peut présenter un contraste suffisant tout en utilisant deux teintes difficiles à différencier. Il faut donc vérifier à la fois les rapports de contraste et la dépendance à la couleur.
Comment rendre un graphique accessible aux personnes daltoniennes ?
Les couleurs peuvent être complétées par des étiquettes, différents types de traits, des formes ou des motifs. Lorsque les données sont importantes, proposer également les valeurs sous forme de tableau permet de fournir une alternative particulièrement robuste.
Comment tester un site pour le daltonisme ?
Les simulateurs de déficiences de perception des couleurs peuvent aider à identifier certaines difficultés. L’affichage en niveaux de gris permet également de repérer rapidement les contenus dépendant de la couleur. Ces méthodes restent toutefois des outils de contrôle et ne remplacent pas un audit RGAA.
Quels éléments faut-il contrôler en priorité ?
Les formulaires, cartes, graphiques, calendriers, alertes, tableaux de bord, boutons et systèmes de réservation doivent être contrôlés en priorité. Les documents téléchargeables et infographies produits par les contributeurs sont également régulièrement concernés.
Sur le même sujet
- Basse vision : mise en situation et 10 améliorations prioritaires
Résumer le contenu avec l’IA :La basse vision ne signifie pas nécessairement ne plus voir. De nombreuses personnes malvoyantes utilisent un site web en agrandissant fortement les contenus, en augmentant les contrastes ou en adaptant les couleurs à leurs besoins. Un site peut pourtant devenir très difficile, voire impossible à utiliser dès que l’affichage est… Lire la suite : Basse vision : mise en situation et 10 améliorations prioritaires - Check-list prête à l’emploi daltonisme : points de contrôle rapides pour contributeurs
Résumer le contenu avec l’IA :Publier un contenu lisible ne signifie pas forcément qu’il est accessible à une personne daltonienne. Une carte touristique reposant sur un code rouge/vert, un graphique composé de courbes différenciées uniquement par leur couleur ou un message d’erreur signalé par un encadrement rouge peuvent devenir difficiles à comprendre pour certains utilisateurs.… Lire la suite : Check-list prête à l’emploi daltonisme : points de contrôle rapides pour contributeurs - Daltonisme et accessibilité web : mise en situation et 10 améliorations prioritaires
Résumer le contenu avec l’IA :Imaginez un site de mairie où les créneaux disponibles pour prendre rendez-vous apparaissent en vert et les créneaux complets en rouge. Ou un site d’office de tourisme où les itinéraires faciles, intermédiaires et difficiles sont différenciés uniquement par leur couleur. Pour la majorité des utilisateurs, l’information semble immédiatement compréhensible. Pour… Lire la suite : Daltonisme et accessibilité web : mise en situation et 10 améliorations prioritaires - Sous-traitance web : comment sécuriser l’accessibilité quand il y a plusieurs prestataires ?
Résumer le contenu avec l’IA :La création ou la refonte d’un site web mobilise rarement un seul intervenant. Une collectivité peut confier la conception graphique à une agence, le développement à une société spécialisée, l’hébergement à un prestataire technique et la maintenance à un autre titulaire. Une destination touristique peut également utiliser un système d’information… Lire la suite : Sous-traitance web : comment sécuriser l’accessibilité quand il y a plusieurs prestataires ?