La couleur est souvent utilisée pour susciter des émotions et mettre l'accent sur certains éléments. C'est l'une des raisons pour lesquelles les designers considèrent la couleur comme un élément essentiel de leur travail. Les couleurs transmettent des messages tant sur le plan psychologique que visuel. L'importance de la couleur est indéniable, mais est-il judicieux de fonder le message uniquement sur la couleur ? Cet article est une modeste tentative pour répondre à cette question et expliquer le raisonnement qui sous-tend mon opinion.
Cela peut sembler évident, mais chacun est différent. Sur le plan intellectuel comme physique, nous avons tous des capacités différentes. Et si nous nous écartons de ce qui est considéré comme « la norme », cela signifie-t-il pour autant que nous devrions être exclus de l’expérience que vivent tous les autres ? Absolument pas ! Nous devons adopter une approche inclusive lorsque nous concevons des expériences. Je ne dis pas que vous ne pouvez pas ou ne devez pas utiliser la couleur, mais plutôt que celle-ci doit être utilisée en complément d’autres moyens de transmettre l’information.
Quelques informations générales sur la perception des couleurs et le daltonisme
Beaucoup de personnes ont des difficultés à identifier ou à percevoir les couleurs. En effet, les statistiques montrent que les hommes sont plus susceptibles d’être daltoniens que les femmes et qu’un homme sur douze est daltonien. Précisons, pour la bonne compréhension de tous, que le daltonisme ne consiste pas en une incapacité à voir les couleurs, mais plutôt à les distinguer les unes des autres. Par exemple, les personnes daltoniennes peuvent percevoir le monde dans des tons de marron ou de jaune. C’est une raison importante pour laquelle nous ne devrions pas nous fier uniquement aux couleurs pour transmettre des informations.
Trois erreurs courantes : qui sont les personnes concernées ?
Lorsque nous utilisons uniquement la couleur pour transmettre des informations importantes, cela pose problème aux personnes daltoniennes, malvoyantes et, dans une certaine mesure, aux utilisateurs âgés. Dans l’image ci-dessous, nous partons du principe que tout le monde peut voir que les carottes sont orange et les haricots verts. Mais pour une personne daltonienne, tout peut apparaître vert — tous les haricots. Cela donnerait une recette très différente ! En fournissant les informations transmises par la couleur par d’autres moyens, tels que du texte ou des descriptions sur la page, on s’assure que les utilisateurs qui ne perçoivent pas les couleurs puissent tout de même comprendre ces informations.
Quelles sont les erreurs les plus courantes que nous commettons ?
On utilise généralement la couleur uniquement dans les graphiques et les tableaux pour distinguer les différents points de données, mais il existe d'autres exemples. Examinons-en quelques-uns.
Erreur n° 1 – Graphiques et tableaux
Il est très courant d'utiliser différentes couleurs pour distinguer les segments de données. Une légende, placée sous le graphique ou le tableau, explique les couleurs et ce qu'elles représentent, mais la couleur est le seul moyen d'établir un lien entre les séries de données et les valeurs représentées dans le graphique. Aucune alternative textuelle n'est disponible. Même si une alternative textuelle pour l'image est accessible par programmation, celle-ci n'est utile qu'aux utilisateurs malvoyants, et non aux utilisateurs voyants atteints de daltonisme.
Sur la première image ci-dessous, des barres de couleur bleue, grise et orange sont utilisées pour représenter les trois segments de données, et les différences seraient évidentes pour la plupart des gens. En revanche, les personnes atteintes de daltonisme pourraient percevoir la deuxième image comme une succession de nuances de gris, ce qui rendrait la compréhension des données impossible.
Cela signifie-t-il que nous ne pouvons pas du tout utiliser de couleurs ? Non ! Cela signifie simplement que nous devons proposer d’autres moyens de transmettre l’information. L’une des solutions consiste à fournir une alternative textuelle sous forme de tableau ou d’une description complète du graphique. Une autre solution consiste à utiliser des motifs pour représenter les séries. L’utilisation de motifs est illustrée à la figure 4, où les utilisateurs, qu’ils soient daltoniens ou non, peuvent tous accéder à l’information grâce à l’utilisation de motifs dans le graphique.
Erreur n° 2 – Les erreurs sont signalées à l'aide de couleurs
Un autre cas de figure courant se présente lorsque des erreurs sont détectées sur une page. Toute page comportant des champs de formulaire est dotée d’un mécanisme de validation permettant de vérifier si les données saisies dans ces champs répondent aux exigences du formulaire. Lorsque ce n’est pas le cas, les champs de formulaire doivent afficher les erreurs afin que l’utilisateur dispose du contexte et des informations nécessaires pour corriger l’erreur et valider le formulaire.
Je rencontre souvent des cas où les erreurs sont signalées soit par « les champs erronés sont surlignés en rouge », soit simplement par des bordures rouges autour des champs du formulaire contenant des erreurs et des bordures vertes autour de ceux qui ont été validés avec succès. Dans l’exemple ci-dessous, vous pouvez constater qu’une personne voyante ne souffrant pas de daltonisme sera en mesure de repérer que le champ « E-mail » comporte une erreur, tandis qu’un utilisateur daltonien verra tous les champs du formulaire surlignés de la même couleur et ne pourra donc pas identifier le champ comportant l’erreur.
Une solution simple consisterait à décrire l'erreur en toutes lettres juste en dessous du champ du formulaire, sous la forme d'un message d'erreur « intégré ». Une meilleure solution serait d'afficher à la fois le message d'erreur et une icône représentant l'état d'erreur ou de réussite de chaque champ du formulaire, comme illustré ci-dessous.
Erreur n° 3 – Les liens sont identifiés uniquement par leur couleur
Un autre cas de figure que l'on rencontre souvent consiste à identifier des liens au sein de paragraphes en utilisant uniquement la couleur, sans autre indication visuelle. Les utilisateurs qui ne souffrent pas de daltonisme peuvent distinguer les différentes couleurs et leur signification, comme dans l'exemple n° 1 ci-dessous. En revanche, pour une personne incapable de différencier les couleurs, le lien est totalement invisible, comme dans l'exemple n° 2 :
Une bonne solution consiste à augmenter la taille de la police et à ajouter une couleur et/ou à souligner le lien afin qu'il soit clair qu'il est associé à une fonctionnalité. Une autre option serait de modifier le style et la taille de la police.
Conclusion
On rencontre bien trop souvent tous ces cas de figure sur les pages web. Et cette liste est loin d’être exhaustive ; elle ne reprend que les cas les plus courants. La bonne nouvelle, c’est que toutes les solutions décrites ici sont rapides et faciles à mettre en œuvre. En tant qu’auteurs de contenu et concepteurs, nous devons proposer d’autres moyens de transmettre le sens du contenu, en plus de la couleur, afin de garantir l’accessibilité à l’ensemble de notre public. Comprendre les difficultés rencontrées par les nombreuses personnes incapables de distinguer les couleurs nous donnera l’empathie nécessaire pour prendre des décisions éclairées concernant l’utilisation des couleurs et mettre en œuvre des alternatives.
