Si vous réalisez des travaux graphiques et que vous n'êtes pas daltonien(ne), il y a de forte chance pour que vous utilisiez spontanément la couleur comme système visuel principal pour signaler des éléments différents. Sachant que 8% de la population masculine est daltonienne, cela signifie qu'un homme sur 12 aura des difficultés, voire ne pourra pas, utiliser votre création.
La solution? Utilisez un autre procédé à la place ou en complément de la couleur, comme par exemple des motifs répétitifs, des différences de trait (pointillé, rectiligne...).
Types de contenu
Examinons plusieurs cas posant typiquement problème aux daltoniens et voyons comment appliquer cette règle dans des cas concrets
Icônes
Lorsque vous utilisez la couleur pour établir un système graphique d’icônes, pensez à utiliser une forme en complément.
Exemple de ce qu’il ne faut pas faire
L’application Messages (anciennement iChat) utilise la couleur pour indiquer le statut de ses contacts.
Vision normale
Vu par un daltonien (simulation) :
Solution
Il est piquant de noter que la version précédente (iChat), associait une forme au statut, solutionnant ainsi la confusion pour les daltoniens.
Attention aux surfaces de couleur. Vérifiez, à l’aide d’outils simulant la dyschromatopsie (voir la liste des outils) si les couleurs choisies sont suffisamment contrastées.
Au besoin:
Pensez à ajouter une texture pour renforcer la différentiation visuelle
Placez la légende directement dans le graphique
si le graphique est interactif, utilisez l’état "hover" (survol de la souris) pour afficher les données chiffrées (solution impraticable sur les supports tactiles).
Aplats de couleurs
Prenons ce graphique utilisant uniquement la couleur comme système graphique.
Vision normale
Vision deutéranope
Vision Tritanope
Solution: utiliser un motif répétitif
Solution pour les graphiques utilisant des lignes
Voici un exemple d’un graphique à lignes qui utilise la couleur et le type de traits pour différencier les lignes. Ainsi, le graphique est adapté aux personnes daltoniennes.
Vérifier le contraste de l’état survolé des liens !
Faites attention à la stylisation des liens, particulièrement à l’état :link et :hover. Ne vous satisfaisez pas de simplement changer la couleur au survol, ou alors, choisissez des couleurs fort contrastées en luminosité (par exemple, vert clair et vert foncé).
Si possible, augmentez l’effet en jouant sur un autre élément visuel (border, underline, ombre de texte, modification d’icône, etc).
Exemple
Les liens "visité" sur Google ne sont pas perçus par tous les visiteurs (ici le lien "Téléviseurs") car le contraste n'est pas suffisemment marqué entre un lien visité et un autre non visité.
Les cartes sont souvent des objets complexes avec beaucoup d'information. Une personne atteint d’une anomalie de la couleur ne pourra pas bénéficier pleinement de ces principes de perception, comme le montre par-exemple cette image :
Exemple
Voici la carte perçue par un deutéranope.
Solution
Employer un contraste élevé entre les couleurs. Penser à tester le contraste entre deux couleurs via des outils en ligne comme Snook Color Contrast Checker.
Un test ludique de classement des couleurs, pour vérifier votre perception des couleurs, développé par Visionary.
test-your.colour-blindness.org
Sim Daltonism
Sim Daltonism (Mac, iOS), est une application gratuite permettant de simuler différents types de daltonisme sur des portions de votre écran. Indispensable!
Sim Daltonism
Stark
Un plugin gratuit pour Sketch (Mac), qui implémente un simulateur de daltonisme et vérificateur de contraste.
getstark.co
