Conception d'interface utilisateur pour les utilisateurs daltoniens

Publié: 2020-12-10

Les daltoniens représentent une part importante de la population – environ 1 homme sur 12 et 1 femme sur 200 pour être exact. Pourtant, les utilisateurs daltoniens sont un public souvent négligé dans la conception de l'interface utilisateur.

Beaucoup confondent le daltonisme avec la vision en noir et blanc, et bien qu'il s'agisse d'un type, il existe des versions moins rares et moins extrêmes.

La plupart des gens sont trichromatiques, ce qui signifie qu'ils perçoivent la couleur comme une combinaison de trois couleurs : vert, rouge et bleu. Différents types de daltonisme ou de déficience de la vision des couleurs (CVD) proviennent de l'incapacité de percevoir clairement une ou plusieurs de ces couleurs. Les types de CVD les plus courants sont le daltonisme rouge-vert, où il est difficile de faire la distinction entre le rouge et le vert, et le daltonisme rouge, où les couleurs rouges semblent ternes.

Nous pensons que tout le monde devrait avoir un accès juste et égal à Internet, il est donc essentiel que les concepteurs d'interface utilisateur conçoivent en pensant aux utilisateurs daltoniens. L'Americans with Disabilities Act (ADA) exige même que certaines organisations respectent les directives WCAG 2.0 niveau AA.

Rendre votre site Web conforme à l'ADA n'est pas difficile, mais cela signifie prendre en compte l'accessibilité des couleurs. En dehors des ramifications juridiques, la conception pour les utilisateurs daltoniens est essentielle à l'expérience utilisateur que vous offrez.

Pourquoi concevoir pour le daltonisme est important

La théorie des couleurs joue un rôle important dans la conception de l'interface utilisateur, car la couleur a le pouvoir d'influencer les décisions d'achat, la réponse émotionnelle et l'expérience utilisateur globale d'un utilisateur. Pensez à l'importance de choisir les bonnes couleurs de marque pour une entreprise. Imaginez maintenant que plus de 8 % des personnes ne peuvent pas lire votre logo ou votre site Web à cause des couleurs que vous avez choisies. C'est beaucoup d'occasions perdues.

Étant donné que les utilisateurs daltoniens ne peuvent pas distinguer certaines couleurs, les concepteurs ne peuvent pas compter uniquement sur la couleur pour la lisibilité ou l'impact émotionnel d'un design. Lorsque vous utilisez la couleur, vous devez tenir compte de la façon dont les utilisateurs interagissent avec elle et créer un design interactif qui attire le public cible, y compris les membres daltoniens. C'est le travail d'un concepteur d'être empathique envers les problèmes des utilisateurs afin qu'ils puissent les prévenir et les résoudre.

De nos jours, il existe des outils comme Visolve qui peuvent ajuster les écrans d'ordinateur pour certains types de daltonisme, mais tous les daltoniens n'utilisent pas ces outils - même tous les daltoniens ne savent pas qu'ils sont daltoniens.

Il est important de noter que votre site Web n'est pas le seul endroit où prendre en compte l'accessibilité des couleurs. Même vos médias sociaux peuvent être rendus accessibles aux aveugles et aux malvoyants.

Terminologie des couleurs à connaître

Avant d'aborder les meilleures pratiques de conception d'interface utilisateur pour les utilisateurs daltoniens, il est bon de revoir les principes fondamentaux de la couleur pour ceux qui ne sont pas des experts en conception. Il y a quatre éléments principaux à prendre en compte lors du choix d'un jeu de couleurs :

Teinte : c'est un synonyme de "couleur" et elle est déterminée par la longueur d'onde spectrale d'une couleur.

Saturation : Aussi appelée chroma, c'est l'intensité ou la pureté d'une couleur, déterminée par la quantité de gris présente. Moins il y a de gris, plus une couleur apparaît brillante.

Luminosité : La luminosité dépend de la quantité de blanc ou de noir ajoutée à une couleur, créant respectivement des teintes et des nuances.

Température : c'est à quel point vous percevez qu'une couleur est chaude ou froide. Un écran d'ordinateur peut affecter la température perçue d'une couleur.

Comment concevoir pour les utilisateurs daltoniens

Concevoir pour les daltoniens ne signifie pas rendre votre produit moins attrayant ; cela signifie simplement suivre certaines meilleures pratiques pendant le processus de conception. La mise en œuvre de bons principes de conception UX et UI ne fera qu'améliorer la convivialité de votre site Web à long terme.

Ne définissez pas avec la couleur seule

Lors de la conception pour les utilisateurs daltoniens, vous ne pouvez pas compter exclusivement sur la couleur pour un message.

Cela est une erreur courante dans la visualisation des données, car les graphiques, les diagrammes et les cartes sont souvent codés par couleur. Les formulaires de réservation indiquant les créneaux de rendez-vous disponibles ou les places de concert disponibles via un code couleur sont également courants. D'autres exemples incluent la signification des champs de formulaire obligatoires ou manquants en les décrivant en couleur ou en indiquant les erreurs avec la couleur.

Vous devriez éviter de transmettre des informations critiques dans du texte et des images en couleur ou au moins fournir ces informations par d'autres moyens accessibles.

Comprendre le contraste et les choix de couleurs

Pour les utilisateurs daltoniens, le contraste entre les couleurs est souvent plus important que la couleur elle-même. Se concentrer sur le contraste est bénéfique pour les concepteurs car les différents types de daltonisme rendent inefficace le simple fait d'éviter une couleur particulière. Pour améliorer le rapport de contraste dans une palette adaptée aux daltoniens, éclaircissez vos couleurs claires et assombrissez les plus sombres.

Voici quelques autres façons d'améliorer la visibilité de votre conception :

Soulignez la différence entre votre couleur de premier plan et celle d'arrière-plan
Ne choisissez pas les teintes les unes à côté des autres sur la roue chromatique à moins qu'il y ait une grande différence de luminosité
Évitez d'utiliser des couleurs de luminosité similaire, quelle que soit la teinte ou la saturation
Augmenter la saturation des teintes utilisées

Dans cet esprit, il existe encore des combinaisons de couleurs qui peuvent être plus difficiles pour différents types d'utilisateurs daltoniens. Votre palette adaptée aux daltoniens devrait s'éloigner de ces combinaisons de couleurs lorsque le rapport de contraste n'est pas significatif :

rouge et vert
Vert et bleu
Vert et marron
Vert et gris
Vert et noir
Bleu et gris
Bleu et violet
Jaune et vert clair

Mettre en œuvre des motifs et des textures

Une façon de mettre à jour vos conceptions visuelles pour les utilisateurs daltoniens sans compter uniquement sur la palette de couleurs consiste à utiliser des motifs et des textures. Cela fonctionne bien dans les cas où la couleur aide généralement à distinguer les informations, comme dans un graphique ou un tableau. L'ajout d'éléments de motif ou de texture aidera les éléments à se démarquer.

Utilisez des symboles et étiquetez tout

Un étiquetage clair est une bonne pratique pour guider tout utilisateur tout au long du parcours client, y compris ceux qui sont daltoniens. Les étiquettes peuvent aider à distinguer les informations généralement transmises en couleur. Cela vaut pour la visualisation de données, telles que des graphiques, ou pour guider les utilisateurs sur une page Web. Demandez-vous si un utilisateur peut trouver son chemin sans les conseils de couleur que vous avez fournis.

Du point de vue du commerce électronique, vous devez également étiqueter vos produits avec des informations claires et descriptives. Ne vous fiez pas aux photos des produits pour raconter toute l'histoire ; étiqueter la couleur d'un produit.

Repensez vos boutons CTA

Le call-to-action (CTA) fait partie intégrante du design interactif. Si un utilisateur ne le trouve pas ou ne le comprend pas, il ne progressera pas dans le parcours et vous n'atteindrez pas vos objectifs. Vous devez attirer l'attention sur votre CTA, et de nombreux designers comptent sur la couleur pour le faire.

Une bonne conception d'interface utilisateur implémente la couleur, mais utilise également une ou plusieurs de ces autres techniques exceptionnelles pour les boutons CTA :

Taille
Placement
Fort contraste
Bordures pondérées
Polices pondérées
Icônes symboliques
Effets de survol

Ces techniques fonctionnent aussi bien pour les utilisateurs daltoniens que non daltoniens, et vous pouvez les utiliser pour d'autres éléments de page sur lesquels vous souhaitez attirer l'attention.

Soulignez ces liens

Si vous lisez un blog, y compris celui-ci, vous remarquerez que les liens sont mis en évidence pour informer les utilisateurs de leur présence. La façon la plus courante de mettre en valeur un lien est d'utiliser la couleur. Pour cela, utilisez le bleu car la plupart des personnes ayant une déficience de la vision des couleurs peuvent le voir.

C'est pour les utilisateurs souffrant d'achromatopsie ou de monochromie, bien que des formes plus rares de daltonisme, que l'accentuation des couleurs ne suffira pas. Pour ces personnes, les liens colorés apparaissent grisés et ne se distinguent pas des autres textes. Vous pouvez rapidement résoudre ce problème en soulignant votre texte d'ancrage.

Considérez le minimalisme

Le minimalisme est loin d'être nouveau. L'esthétique est à la mode depuis des décennies, faisant son chemin à travers l'architecture, l'art, la décoration intérieure et, bien sûr, le design.

Et maintenant, le minimalisme a un rôle dans l'accessibilité des couleurs car moins il y a de couleurs, moins il y a de risque de confusion. Il est également attrayant sur le plan stylistique et moins distrayant, ce qui en fait un choix solide pour tous les publics.

Vous n'êtes pas obligé d'adhérer à un design minimaliste pour être accessible, mais c'est une voie qui fonctionne.

Utiliser un simulateur de daltonisme

Alors que la communauté des concepteurs s'efforce d'offrir une expérience utilisateur accessible, de nombreux outils formidables sont apparus pour vous aider. Les simulateurs daltoniens, par exemple, permettent aux concepteurs de voir leurs conceptions comme le ferait un utilisateur daltonien. Un de ces simulateurs, Oracle, est disponible pour Mac, Windows et Linux. Utilisez un simulateur de daltonisme pour tester votre travail tout au long du processus de conception et comprendre comment les utilisateurs interagissent avec vos choix.

Lorsque vous décidez de votre palette de couleurs au début, nous vous suggérons d'utiliser un outil de sélection de couleurs qui évalue vos choix selon les directives AA. Ce vérificateur de contraste peut vous indiquer votre rapport de contraste, et ce générateur de couleurs accessible suggère des combinaisons de couleurs qui fonctionnent mieux.

Rendez votre site Web accessible

Concevoir pour les daltoniens garantit que votre site Web offre une expérience utilisateur que tout votre public peut parcourir et apprécier. Pour eux, cela signifie une marque sur laquelle ils peuvent compter ; pour vous, cela signifie des conversions réussies. Selon la taille de votre entreprise, cela peut également signifier respecter la loi. Quoi qu'il en soit, cela fait partie de la construction d'un environnement en ligne juste et équitable.

L'accessibilité des couleurs n'est qu'un élément de la création d'un site Web accueillant. Assurez-vous de consulter notre guide pour rendre votre contenu accessible à la communauté sourde et HOH.