Comment concevoir pour le daltonisme

Imaginez ceci : vous soumettez un formulaire en ligne et recevez un message d’erreur indiquant : ‘Veuillez corriger les erreurs du formulaire.’ Vous faites défiler la page, mais rien n’indique où se trouvent les erreurs.

Pour les 300 millions de personnes dans le monde qui présentent une forme de déficience de la vision des couleurs(opens in a new tab), le scénario ci-dessus est une situation quotidienne. Et comme la couleur est l’un des moyens les plus courants de transmettre de l’information, ces utilisateurs rencontrent de nombreux défis lorsqu’ils naviguent sur le web.

Ci-dessous, nous expliquerons l’impact de la couleur sur l’accessibilité et partagerons des conseils pour concevoir des sites adaptés aux daltoniens — sans pour autant renoncer entièrement à la couleur.

3 différents types de daltonisme. Daltonisme rouge-vert, daltonisme bleu-jaune et daltonisme monochromatique.

Comprendre le daltonisme

Contrairement à ce que le terme daltonisme pourrait laisser penser, la plupart des personnes atteintes de déficience de la vision des couleurs perçoivent les pigments. Plutôt que de ne voir aucune couleur, elles ont des difficultés à distinguer certaines couleurs.

Il existe trois types différents de daltonisme :

1. Daltonisme rouge-vert : Il s’agit du type de daltonisme le plus courant et il provoque une confusion entre le rouge et le vert. Les types de daltonisme rouge-vert incluent :

• Deutéranomalie : le vert paraît rouge.

• Protanomalie : le rouge paraît vert et terne.

• Protanopie/Deutéranopie : impossible de distinguer le rouge du vert.

2. Daltonisme bleu-jaune : Moins courant que le daltonisme rouge-vert, il provoque une confusion entre le bleu et le jaune. Les types de daltonisme bleu-jaune incluent :

• Tritanomalie : rend difficile la distinction entre le jaune et le rouge ou le bleu et le vert.

• Tritanopie : rend difficile la distinction entre le bleu et le vert, le violet et le rouge, ou le jaune et le rose. Les couleurs paraissent également moins vives.

3. Monochromatie : Il s’agit de la forme la plus rare de daltonisme(opens in a new tab) et elle touche environ 1 personne sur 33 000. Il s’agit du « vrai » daltonisme, la personne ne percevant aucune couleur.

Quel que soit le type de daltonisme, celui-ci affecte la facilité avec laquelle une personne peut naviguer sur le web. Par exemple, les liens ou boutons peuvent être difficiles à suivre s’ils ne sont pas visibles ou s’ils manquent de contraste ou de clarté. Le texte peut également être difficile à lire s’il n’est pas suffisamment contrasté avec l’arrière-plan. Le texte noir sur fond blanc est particulièrement difficile à lire pour les personnes atteintes de daltonisme bleu-jaune ou rouge-vert. Cette combinaison peut provoquer une fatigue oculaire ou un éblouissement, réduisant ainsi la lisibilité.

En fin de compte, ces problèmes entraînent une mauvaise expérience utilisateur pour les personnes daltoniennes, ce qui complique l’accomplissement des tâches quotidiennes.

Vérifiez votre contraste de couleurs

Le contraste des couleurs fait la différence entre un site web facile à naviguer et à utiliser, et un site qui ne l’est pas. Sans un bon contraste de couleurs entre les éléments, les utilisateurs daltoniens peuvent avoir du mal à les distinguer facilement.

Offrir un bon contraste de couleurs améliore non seulement l’expérience utilisateur, mais vous aide aussi à respecter les normes d’accessibilité du Référentiel pour l’accessibilité des contenus web (WCAG), citées dans l’Equality Act 2010 au Royaume-Uni. Le WCAG comporte trois niveaux de conformité différents: A (niveau minimal), AA (standard) et AAA (le plus élevé). Chaque niveau propose des recommandations différentes pour les ratios de contraste de couleurs :

• Niveau A et AA : Le texte normal doit avoir un ratio de contraste minimum de 4,5:1. Le texte large doit avoir un ratio de 3:1.

• Niveau AAA : Le texte normal doit avoir un ratio de 7:1 et 4,5:1 pour le texte large.

Au minimum, vous devriez viser le niveau AA ou AAA pour répondre non seulement aux besoins des utilisateurs daltoniens, mais aussi à ceux ayant d’autres déficiences visuelles. Il est important de noter que le niveau AAA est le plus élevé en matière d’accessibilité web et offre une accessibilité maximale, mais il impose des contraintes de conception plus strictes.

Bonnes pratiques pour des sites adaptés aux daltoniens

Concevoir votre site pour qu’il soit accessible aux personnes atteintes de déficience de la vision des couleurs ne signifie pas que vous devez renoncer totalement à la couleur ; il suffit d’être plus intentionnel dans son utilisation. Voici quelques bonnes pratiques à adopter pour concevoir en tenant compte du daltonisme — toutes contribuent à un design plus accessible et inclusif.

1. Ne vous fiez pas uniquement à la couleur

Le principe fondamental de la conception pour le daltonisme est de ne pas dépendre excessivement de la couleur. Vous ne devez pas utiliser la couleur comme seul élément pour attirer l’attention de vos utilisateurs — ou pour signaler une information clé. Si vous utilisez la couleur pour transmettre une information, veillez à la combiner avec un autre élément (comme un message d’erreur ou un symbole) pour aider les personnes atteintes de déficiences de la vision des couleurs à suivre.

2. Utilisez des icônes et des symboles

L’un des moyens les plus courants de compléter la couleur sur un site web est l’utilisation d’icônes et de symboles. Par exemple, des icônes universelles comme les points d’exclamation peuvent attirer l’attention de l’utilisateur. Pour reprendre l’exemple d’un champ de formulaire manquant, vous pouvez combiner un contour rouge avec un point d’exclamation pour indiquer une erreur.

Un exemple de graphique à barres où chaque colonne a un motif différent.

3. Utilisez des textures et des motifs

Lorsque vous souhaitez mettre en avant certains objets, il est judicieux d’incorporer des textures et/ou des motifs. Cela est particulièrement utile pour les graphiques et diagrammes où la couleur sert souvent à différencier les éléments. Ajouter des textures et motifs comme des damiers, des lignes ou des points permet à chaque élément de se démarquer et d’être facilement identifiable.

Par exemple, si vous incluez une carte avec différents types de terrains, pensez à utiliser différentes textures (rayures, points, hachures, etc.) en plus de la couleur. Cela permet de différencier les divers reliefs, rendant la carte plus accessible aux personnes daltoniennes.

Enfin, si vous intégrez des graphiques ou diagrammes sur votre site, pensez à ajouter un texte alternatif pour les personnes qui ne peuvent pas percevoir les éléments visuellement.

4. Utilisez des étiquettes

L’utilisation d’étiquettes sur votre site peut grandement améliorer l’expérience utilisateur pour les personnes daltoniennes. Les textures et motifs sont d’excellents éléments de design pour les graphiques, mais l’ajout d’étiquettes rend les choses plus claires. Cela aide également les utilisateurs de lecteurs d’écran à mieux naviguer et comprendre le contenu de votre site.

L’étiquetage est particulièrement important si vous avez des éléments différenciés par la couleur sur votre site. Par exemple, si vous vendez des articles disponibles en plusieurs couleurs, étiqueter chaque option aide les utilisateurs à savoir ce qu’ils achètent et à prendre des décisions plus éclairées.

En bonus, l’ajout d’étiquettes peut améliorer votre référencement naturel (SEO). Les étiquettes fournissent aux robots d’indexation plus d’informations sur le contenu de votre page. Plus vos étiquettes sont descriptives, plus votre classement SEO sera élevé.

5. Osez le gras

Les personnes daltoniennes perçoivent généralement mieux les lignes épaisses et marquées. Évitez d’utiliser de fines bandes de couleur et assurez-vous que les liens soient bien visibles et en gras. Cela améliore la clarté visuelle et la concentration de l’utilisateur. Par exemple, utiliser des lignes épaisses et en gras sous les boutons d’appel à l’action (CTA) peut aider les utilisateurs à comprendre la prochaine étape, réduisant ainsi la confusion et la frustration.

Versions stylisées de la même page web montrant comment le texte en gras peut améliorer la lisibilité.

6. Utilisez correctement le contraste des couleurs

Vous pouvez faire ressortir les éléments de votre site pour tous les utilisateurs en utilisant correctement le contraste des couleurs dans votre design. L’astuce consiste à jouer sur la luminosité et la tonalité, en plus des teintes. Si vous ne jouez que sur la couleur mais gardez la même luminosité, les éléments peuvent sembler se fondre ou être confus pour les personnes daltoniennes.

Ajuster la luminosité et la tonalité n’est pas seulement une bonne pratique pour l’accessibilité liée au daltonisme, c’est aussi une bonne pratique pour l’UI en général. Vous constaterez peut-être que le contraste par la luminosité et la tonalité, plutôt que par la pigmentation, est aussi plus satisfaisant esthétiquement.

Pour mieux évaluer la façon dont vous appliquez les contrastes de luminosité et de tonalité sur votre site, visualisez-le en niveaux de gris.

7. Évitez certaines combinaisons de couleurs

Puisque le daltonisme affecte chaque individu différemment, éviter seulement certaines teintes ne suffit pas. Certaines combinaisons de couleurs peuvent poser problème aux utilisateurs daltoniens. Parmi les combinaisons à éviter :

• Vert/rouge

• Vert/bleu

• Vert/noir

• Vert/marron

• Vert/gris

• Vert clair/jaune

• Bleu/violet

• Bleu/gris

Dans la mesure du possible, utilisez une palette adaptée au daltonisme et des couleurs accessibles. Cependant, si vous utilisez l’une des combinaisons ci-dessus, veillez à proposer des méthodes alternatives pour transmettre l’information, comme des sous-titres, des étiquettes, des éléments de focus ou des icônes.

Versions stylisées de la même page web. Une version utilise de nombreuses couleurs différentes, l’autre est entièrement bleue.

8. Adoptez le minimalisme

Avoir différentes palettes et teintes sur votre site peut sembler amusant et attrayant, mais cela peut aussi être déroutant et frustrant pour les personnes daltoniennes. Vous pouvez tout de même vous amuser en restant fidèle à une palette et en jouant sur les dégradés, la luminosité et la tonalité. En plus d’améliorer l’accessibilité de votre site pour les personnes atteintes de déficiences de la vision des couleurs, un design minimaliste rendra également votre site plus élégant, professionnel et agréable visuellement.

Pourquoi l’accessibilité des sites pour daltoniens est importante

Le daltonisme touche un pourcentage important de personnes dans le monde, ce qui signifie que les propriétaires de sites web ont la responsabilité — légale et éthique — de créer un site adapté aux daltoniens.

D’un point de vue légal, un site adapté au daltonisme respecte les directives citées dans l’Equality Act 2010, ainsi que le Règlement sur l’accessibilité des sites web et applications mobiles du secteur public de 2018 pour les organismes publics. Suivre ces directives permet de réduire le risque d’actions en justice coûteuses, y compris les procès et les mises en demeure.

Pour les utilisateurs, un site adapté au daltonisme améliore l’expérience globale. Ces sites sont généralement minimalistes, plus épurés et mieux organisés, avec une navigation et une lisibilité accrues. Un site plus convivial élargit votre audience, ce qui peut générer davantage d’opportunités de revenus et améliorer la réputation de votre entreprise.

Tests et retours d’expérience

Lorsque vous concevez ou mettez à jour votre site, il est important de tester régulièrement le contraste des couleurs. Utiliser des outils comme un vérificateur de contraste de couleurs est un excellent point de départ. Ces outils offrent une vue d’ensemble du niveau de contraste existant et des points à améliorer.

Cependant, pour créer un design réellement accessible, il est essentiel d’impliquer des utilisateurs atteints de déficiences de la vision des couleurs dans le processus de conception et de test. Cela vous permet de recueillir des retours authentiques sur l’accessibilité de votre contenu numérique et d’identifier des problèmes que les logiciels ne détecteraient pas. Pensez à contacter des associations locales ou à utiliser les réseaux sociaux pour trouver des personnes daltoniennes à inclure dans les tests.

Lors de vos tests, veillez à recueillir des retours sur l’accessibilité pour le daltonisme tout au long du processus. Utilisez des enquêtes ou des formulaires de retour pour recueillir leurs avis. Vous pourrez ensuite intégrer ces retours dans vos refontes pour améliorer continuellement l’accessibilité de votre site.

Tirer parti d’AudioEye pour une meilleure accessibilité au daltonisme

Concevoir un site accessible au daltonisme optimisera l’expérience utilisateur pour tous les utilisateurs. Avec AudioEye, créer un site accessible aux personnes daltoniennes est facile. Notre Vérificateur de contraste de couleurs détermine si vos combinaisons de couleurs sont accessibles pour les personnes daltoniennes ou ayant d’autres déficiences visuelles, ainsi que leur conformité avec les normes WCAG. Cela simplifie la création de palettes de couleurs conviviales et accessibles.

En plus de notre vérificateur de contraste, les corrections automatisées d’AudioEye apportent des corrections en temps réel pour les problèmes d’accessibilité courants — y compris ceux liés à un mauvais contraste de couleurs. Nos corrections d’experts complètent les tests automatisés en impliquant des experts en accessibilité et des membres de la communauté en situation de handicap qui identifient et corrigent les erreurs. Ensemble, ces outils améliorent l’expérience utilisateur pour les personnes en situation de handicap, y compris celles atteintes de déficiences de la vision des couleurs.

Prêt à vérifier si votre site est accessible aux personnes daltoniennes ? Utilisez notre Vérificateur de contraste de couleurs.

Vous souhaitez plus de conseils pour concevoir des sites accessibles ? Consultez le Guide ultime de l’accessibilité web d’AudioEye, qui couvre tout, des ratios de contraste aux liens accessibles.