La couleur dans le design web
La couleur est très important en design centré utilisateur. Le designers qui doivent développer une plateforme qui prends en compte le daltonisme ont besoin donc se mettre dans la peau de ces personnes.
Il existe plusieurs forme de daltonisme : deutéranopie, protanomalie et achromatopsie ne sont que des exemples. Une personne souffrant de deutéranopie fait confusion entre le vert et le rouge, une personne souffrant de protanomalie est limitée dans la vision du rouge et, enfin, une personne souffrant d’achromatopsie a l'absence totale de la vision des couleurs.
Mais combien de daltoniennes y a-t-il dans le monde ?
Approximativement un homme sur 12 souffre de daltonisme. Cela signifie que tous les 100 utilisateurs qui visitent votre site web, il y en a 8 qui peuvent voir le contenu de manière très différente par rapport à vos attentes.
Alors, comment s’assurer que tous les utilisateurs puissent profiter de votre plateforme sans obstacles ? Regardez la vidéo pour découvrir mes 4 conseils. Vous pouvez passer directement au sujet que vous intéresse en cliquant sur le bouton correspondante. Mais attention ! Des quiz ont été introduit dans la vidéo pour évaluer votre compréhension de certains sujets.
Mes conseils expliqués
#1 UTILISER MOTIFS ET TEXTURES
Les différences entre les couleurs sont extrêmement importantes pour la visualisation des données. Choisir des couleurs qui ont un faible contraste peut rendre votre graphique difficile à interpréter pour les utilisateurs daltoniens. Essayez d'utiliser différentes textures et motifs, par opposition à plusieurs couleurs, pour permettre aux utilisateurs de différencier facilement les différents segments de votre graphique. Veuillez noter dans les images ci-dessous comment les segments sont identifiables quand on utilise des textures e des motifs.
|
|
|
|
#2 UTILISER ICÔNES ET SYMBOLES
Les messages de réussite et d'erreur sont souvent de couleur verte et rouge respectivement. Ne vous fiez pas uniquement à la couleur pour communiquer des erreurs ou transmettre des informations. Certains types de daltonisme peuvent rendre difficile, voire impossible, percevoir des messages d’erreur rouges. Utilisez plutôt icônes et de symboles pour informer l'utilisateur qu'une erreur a été commise.
#3 SOULIGNER LES LIENS HYPERTEXTUELS
On utilise souvent la couleur ou l’épaisseur de la police pour désigner des liens. Il peut-être possible pour une personne souffrant de daltonisme de distinguer un lien du texte normal, mais ce n'est pas idéal. Une personne atteinte d’achromatopsie ne serait pas en mesure de faire la différence entre le texte et les lien et il devrait survoler le texte pour voir si le curseur se transforme en pointeur. C’est donc une bonne idée d’ajouter un soulignement aux liens. Cela facilite la distinction immédiate entre le texte normal et le lien.
#4 ASSOCIATIONS DE COULEURS À ÉVITER
Comme le daltonisme affecte les personnes de différentes manières, il est difficile de déterminer quelles couleurs sont «safe» à utiliser dans la conception Web. Néanmoins, voici une liste d’associations de couleurs à éviter car elles sont un cauchemar potentiel pour les utilisateurs daltoniens:
De plus, au lieu de compter sur le noir et le blanc comme seules couleurs contrastantes; essayez d’utiliser une gamme de couleurs et de teintes clairement contrastées dans votre conception.
POUR CONCLURE
Il existe encore d'autres moyens pour améliorer l’accessibilité de votre site web. Les quatre conseils présentés dans cette page ne sont que des exemples. Stay tuned !
Bibliographie et ressources :
- Les images de l'arc-en-ciel, du diagramme à barres et toutes les icônes ont été téléchargée depuis Freepik.com et modifiées avec Adobe Illusatror CS6.
- Colblindor : un simulateur de vision dyschromatopsique en ligne.
- Page Wikipedia sur le daltonisme.
- Le site de l'organisation Colour Blind Awareness.
- Logan Fiorella, Richard E. Mayer (2018), What works and doesn't work with instructional video, In Computers in Human Behavior, Volume 89, 2018, (pp. 465-470).
- How to Design for Color Blindness, article sur le blog de Usabilla.
- Improving The Color Accessibility For Color-Blind Users, article sur le blog de Smashing Magazine.
- Musique sous licence "royalty-free" : Funky Muted Guitar de Al Charm
- La vidéo a été réalisée avec Adobe After Effects CS6.