Pour de nombreux utilisateurs de sites Web voyants, la couleur est un moyen utile de trier et de coder les informations. Mais il est important de se rappeler que le fait d’être voyant n’est pas la condition « par défaut » ; l’Organisation mondiale de la santé estime qu’environ 2,2 milliards de personnes souffrent d’un handicap visuel quelconque. Cela représente près de 30 % de la population mondiale !
Les personnes souffrant d’un handicap visuel, y compris celles qui sont daltoniennes, malvoyantes, aveugles ou sourdes-aveugles, peuvent ne pas être en mesure de voir les différences entre les couleurs, quel que soit le niveau de contraste entre elles.
Par conséquent, le fait de se fier uniquement à la couleur pour communiquer des informations pourrait priver une partie importante de vos utilisateurs d’informations importantes sur le contenu. Cela ne veut pas dire que vous ne pouvez pas utiliser la couleur pour transmettre des informations – en fait, c’est un moyen utile de renforcer les informations pour les utilisateurs qui peuvent percevoir les différences de couleur.
Mais pour que les utilisateurs malvoyants puissent accéder à votre contenu, les directives d’accessibilité aux contenus web exigent que les sites incluent au moins un indice visuel autre que la couleur pour communiquer les mêmes informations.
Comme c’est souvent le cas, les solutions conçues dans un souci d’accessibilité profiteront également aux utilisateurs non handicapés, y compris à ceux qui préfèrent imprimer les documents en noir et blanc.
COMMENT PUIS-JE UTILISER LA COULEUR POUR L’ACCESSIBILITE ?
Il existe de nombreuses façons de communiquer visuellement des informations qui ne nécessitent pas de couleur. Il n’existe pas de solution unique, et le mécanisme que vous utilisez dépend de votre situation et des informations que vous essayez de transmettre.
Les outils qui peuvent être utilisés pour favoriser l’accessibilité des couleurs sont notamment les suivants :
- Les motifs, les remplissages et les textures (par exemple, les pleins et les déliés ou les pointillés et les pleins)
- Les symboles (par exemple, ajouter un astérisque, des coches ou des X)
- Ajout d’étiquettes et de repères textuels
- Souligner, mettre en gras ou en italique le texte.
- Changement de police de caractères
- Augmenter ou réduire la taille de la police
- Ajout ou modification de formes (par exemple, un carré devient un cercle).
EXEMPLES DE CAS OU LA COULEUR EST UTILISEE POUR TRANSMETTRE DES INFORMATIONS ET LES ALTERNATIVES POSSIBLES
GRAPHIQUES ET DIAGRAMMES
La couleur est utile dans les diagrammes circulaires, les diagrammes à barres et autres visualisations de données pour indiquer différentes catégories de données.
Lorsque vous utilisez de la couleur dans un diagramme ou un graphique, il est préférable d’utiliser différents tons de la même couleur (par exemple, trois nuances différentes de bleu plutôt que du rouge, du vert et du bleu) afin que les couleurs apparaissent différentes si elles sont converties en noir et blanc.
Les indices visuels de soutien courants pour les diagrammes et les graphiques comprennent des motifs de remplissage et des étiquettes de texte différents pour chaque catégorie de données.
MENUS
La couleur est souvent utilisée dans les menus pour indiquer à l’utilisateur où il se trouve dans un site ou quel élément de menu il a sélectionné. Dans ce cas, l’ajout d’un trait de soulignement ou d’un contour à l’élément concerné constitue un indice visuel de soutien courant.
BOUTONS ET LIENS
Les changements de couleur sont souvent utilisés dans les boutons et les liens pour indiquer les états de survol et les états de mise au point (c’est-à-dire quel élément est sur le point d’être sélectionné par l’utilisateur s’il clique sur sa souris ou appuie sur la touche « Entrée » de son clavier).
Ils sont parfois aussi utilisés pour communiquer les états visités, ou les boutons et liens qui ont été sélectionnés précédemment par l’utilisateur.
La présence d’un lien est généralement signalée par un soulignement et une couleur de texte différente de celle du corps du texte. Pour conserver une bonne ergonomie, il est conseillé de souligner les liens.
Par conséquent, des changements dans la police de caractères elle-même pourraient communiquer un état de focus, de survol ou de visite (par exemple, en mettant le texte tout en majuscules, en le mettant en gras ou en italique).
Les utilisateurs ne s’attendent pas à ce que le texte des boutons soit souligné ; ce serait donc un excellent moyen de communiquer un changement d’état. Vous pouvez également ajouter des éléments de texte, comme des parenthèses, ou modifier la forme du bouton lui-même.
MESSAGES D’ERREUR
Les champs de formulaire sont souvent soulignés en rouge pour communiquer une erreur, comme un nom d’utilisateur et un mot de passe qui ne correspondent pas ou un champ obligatoire vide.
L’ajout d’astérisques ou de symboles d’avertissement est un moyen courant de communiquer des messages d’erreur. Pour aller plus loin, vous pouvez ajouter un texte expliquant l’erreur et la façon de la corriger.
ACCENTUER LES DIFFERENCES DE COULEUR PAR DES REPERES VISUELS
La couleur peut être un moyen efficace de communiquer des informations à ceux qui sont capables de la percevoir. Mais pour garantir une expérience utilisateur optimale pour tous, des repères visuels supplémentaires peuvent être utilisés en alternative aux différences de couleur.
En matière d’UX et d’UI design, notre équipe peut mettre en place un design efficace et adapté pour tous. Contactez-nous pour en discuter.
