La couleur joue un rôle essentiel dans la conception de L’interface utilisateur. Lorsqu’il est bien fait, il améliore l’expérience utilisateur, influence les décisions d’achat et reflète la voix des marques.

alors, comment concevez-vous des interfaces efficaces, accessibles et esthétiques pour les utilisateurs daltoniens?

bien que la science derrière le daltonisme soit assez complexe, l’essentiel est que les daltoniens ont du mal à voir la couleur clairement ou à différencier certaines couleurs., Dans cet article, nous partagerons quelques conseils sur la façon dont vous pouvez améliorer l’accessibilité de votre site et l’expérience qu’il offre aux daltoniens.

daltonisme dans un monde numérique

selon des études, environ 1 homme sur 12 (et 1 femme sur 200) est daltonien. Bien que les daltoniens puissent voir les choses aussi clairement que tout le monde, ils ne sont pas en mesure de discerner complètement la lumière rouge, verte ou bleue. Il existe différents types de daltonisme; deutéranopie et protanopie daltonisme sont les plus courants.,

Les personnes atteintes de daltonisme rouge-vert (deutéranopie) ont de la difficulté à faire la distinction entre le rouge et le vert. De même, pour les personnes atteintes de daltonisme rouge (protanopie), toutes les couleurs rouges semblent ternes.

ce que cela signifie du point de vue de la conception, c’est que s’appuyer sur la couleur seule pour la lisibilité et l’abordabilité rendrait votre site web difficile à utiliser pour quelqu’un qui est daltonien.

Vous pouvez utiliser le simulateur de daltonisme Coblis pour voir à quoi ressemble votre site pour les utilisateurs daltoniens.,

7 façons D’améliorer l’accessibilité des couleurs pour les utilisateurs daltoniens

Les éléments et techniques de conception qui améliorent l’accessibilité des couleurs pour les utilisateurs daltoniens sont généralement considérés comme de bonnes pratiques de conception. Alors que vous pourriez penser que l’attrait esthétique de votre site Web pourrait souffrir si vous concevez pour l’accessibilité, ce n’est certainement pas le cas.

ici, nous examinerons certaines des façons dont vous pouvez concevoir une interface utilisateur plus accessible en gardant à l’esprit les utilisateurs daltoniens.

#1: utiliser des motifs et des Textures

Les différences de couleur sont incroyablement importantes avec la visualisation de données, par exemple,, des graphiques et des diagrammes à secteurs. Choisir des couleurs qui ont un faible rapport de contraste peut rendre votre graphique difficile à interpréter pour les utilisateurs daltoniens.

Voici ce que vous devriez faire à la place:

  • utilisez des motifs et des textures pour permettre aux utilisateurs de différencier facilement les différents segments.
  • ajoutez des étiquettes de texte aux segments pour les rendre encore plus faciles à comprendre.

voyons comment une personne daltonienne atteinte de tritanopie pourrait voir un graphique à barres bleu-vert par rapport à la façon dont elle verrait le même graphique avec des motifs et des textures.,

Voici à quoi cela ressemblerait si vous étiquetiez chaque segment au lieu d’utiliser des motifs:

#2: Utilisez des couleurs et des symboles

Vous ne devriez pas vous fier uniquement à la couleur pour communiquer des erreurs ou transmettre des

jetons un coup d’œil au formulaire d’inscription de Facebook par exemple., Si le formulaire reposait uniquement sur la couleur pour faire savoir aux utilisateurs qu’ils avaient fait une erreur sur un champ particulier, cela pourrait ressembler à ceci pour un utilisateur aveugle (protanopie):

Voici un aperçu du formulaire D’inscription de Facebook avec des symboles et des messages d’erreur joints:

le fait qu’ils aient commis une erreur améliore l’accessibilité et les aide à corriger leur erreur plus rapidement.

#3: Utiliser des étiquettes de texte

L’ajout d’étiquettes de texte aux filtres de couleur et aux échantillons améliore l’accessibilité pour les utilisateurs daltoniens., Selon le type de daltonisme, les utilisateurs peuvent avoir du mal à différencier les différentes couleurs (ou nuances) sans une sorte de texte descriptif.

par exemple, sans l’étiquette de texte descriptif sur Amazon, les utilisateurs daltoniens ne seraient pas en mesure de distinguer une chemise rouge d’une chemise orange ou verte.

L’ajout d’étiquettes de texte aux filtres de couleur améliore également l’accessibilité pour les personnes ayant une vision normale. Par exemple, le blanc, le blanc cassé et le gris clair sont souvent difficiles à différencier sur les moniteurs.,

#4: soulignez les liens

La plupart du temps, nous utilisons la couleur de la police ou le poids de la police pour désigner les liens. Bien qu’il soit possible pour une personne atteinte de deutéranomalie, de protanopie ou de tritanopie de distinguer le texte d’ancrage du texte normal, ce n’est certainement pas idéal en raison du faible rapport de contraste.

Une personne monochromatique ne serait pas du tout capable de faire la différence entre le texte et le texte d’ancrage et devrait survoler le texte pour voir si son curseur se transforme en pointeur.

Pour cette raison, il est une bonne idée d’ajouter un soulignement des liens de texte., Cela permet de distinguer immédiatement le texte normal et le texte d’ancrage. Voici un exemple du site Engadget:

#5: combinaisons de couleurs à éviter

certaines combinaisons de couleurs ne sont pas idéales pour les utilisateurs daltoniens, soit parce qu’elles ont de faibles rapports de contraste, soit parce qu’elles sont difficiles à différencier.,

Voici une liste de combinaisons de couleurs que vous devriez éviter d’utiliser dans vos conceptions d’interface autant que possible:

  • Vert-Rouge
  • vert-bleu
  • Vert-Brun
  • vert-noir
  • Vert-Gris
  • bleu-gris
  • vert-jaune clair
  • bleu-violet

es combinaisons de couleurs rouge et bleu-violet ressembleraient à un utilisateur avec protanopia:

#6: Faire ressortir les boutons primaires

plusieurs fois, les concepteurs s’appuient sur la couleur pour faire ressortir les boutons primaires., Le problème est que la couleur que vous utilisez peut être difficile à percevoir pour les utilisateurs daltoniens.

Voici ce que vous devez faire à la place:

  • Augmenter la taille de votre bouton principal.
  • essayez différentes combinaisons de placement.
  • augmenter le contraste entre les boutons primaire et secondaire.
  • utilisez des bordures, des icônes ou le poids de la police pour différencier les boutons primaires et secondaires.

Par exemple, Reformation utilise la taille et la couleur pour mettre l’accent sur le bouton principal.,

et Firebox présente son bouton principal dans le coin inférieur droit et le bouton secondaire dans le coin supérieur gauche.

#7: marquer les champs de formulaire obligatoires

Les utilisateurs daltoniens peuvent avoir des difficultés à faire la différence entre les champs obligatoires et facultatifs si vous utilisez la couleur seule pour désigner les champs obligatoires sur les formulaires.

Au Lieu de cela, vous pouvez:

  • marquer les champs obligatoires avec un astérisque (*).
  • étiqueter les champs avec le mot requis ou facultatif.
  • supprimer les champs facultatifs des formulaires.,

Conclusion

La conception D’une interface utilisateur pour les utilisateurs daltoniens vous aidera également à améliorer l’accessibilité de votre site pour les utilisateurs ayant une vision normale. Bien qu’il n’existe pas de solution unique en matière d’accessibilité web, voici quelques conseils à garder à l’esprit:

  • utilisez des motifs et des textures pour afficher le contraste dans les graphiques et les graphiques.
  • Utiliser des couleurs et des symboles pour transmettre des messages d’erreur.
  • ajoutez des étiquettes de texte aux filtres de couleur et aux échantillons.
  • soulignez les liens pour différencier le texte normal du texte d’ancrage.,
  • évitez d’utiliser de mauvaises combinaisons de couleurs telles que Vert-Rouge et bleu-violet.
  • utilisez la taille, le placement ou le poids des polices pour faire ressortir les boutons principaux.
  • marquez les champs de formulaire obligatoires avec un symbole (tel qu’un astérisque) ou étiquetez-les.