Le guide

Comment concevoir des écrans accessibles aux daltoniens.

Démarrer

Il n'y a qu'une seule règle: ne vous fiez pas à la couleur !

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 sus 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.

Messages n'utilise que la couleur pour indiquer le statut

Vu par un daltonien (simulation) :

Messages 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.

Messages n'utilise que la couleur pour indiquer le statut

iChat utilisait la forme en plus de la couleur


Haut de page

Graphiques de visualisation de données

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 pour afficher les données chiffrées

Voici quelques cas concrets

Solution pour les graphiques utilisant des aplats de couleurs

Prenons ce graphique utilisant uniquement la couleur comme système graphique.

Graphique à barres de couleurs uniuqment

Le graphique ci-dessous montre comment il est perçu ainsi par un deutéranope.

Graphique à barres de couleurs perçu par un deutéranope

Le graphique ci-dessous montre comment il est perçu ainsi par un Tritanope.

Graphique à barres de couleurs perçu par un deutéranope

Voici une manière efficace d’éviter cette confusion: utiliser un motif répétitif

Graphique à barres accessible aux daltoniens

Solution pour les graphiques utilisant des ligne

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.

Graphique à lignes accessible aux daltoniens

Source : teknologic.


Haut de page

Les liens

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, bleu clair et bleu 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çu par tous les visiteurs (ici le lien "Téléviseurs") car le contraste n'est pas suffisemment marqué entre un lien visité et non visité.

Liens visités dans une recherche Google

Voici cette page vue par un deutéranope.

Liens visités dans une recherche Google vu par un deutéranope


Haut de page

Formulaires

Attention aux messages d'erreur

Ne pas se fier à la couleur pour indiquer qu’un champ est obligatoire.

Solution

Il est possible de les combiner avec une typographie ou des formes qui relèvent plus fortement l’importance de l’information.

Message d'erreur dans un formulaire du site Orange

Pour un daltonien, l'information viendra plutôt de l'icône avec la crtoix plutôt que des labels et champs passés en rouge.

Message d'erreur dans un formulaire du site Orange


Haut de page

E-commerce color picker

Sur un e-commerce, pensez à afficher le nom de la couleur plutôt qu’une pastille.


Haut de page

Cartes

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

La carte de France avec une légende de couleurs pour la météo

Voici la carte perçue par un deutéranope.

La carte de France avec une légende de couleurs pour la météo vue 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.


Haut de page

Ressources

Stark

The color-blind simulator and contrast checker for Sketch. Design with accessibility in mind.
http://www.getstark.co/

Eyeteq / Spectral Edge

Eyeteq enhances visibility by improving colour rendering and definition on streaming video content in real-time.
http://spectraledge.co.uk/eyeteq/

Comprendre le daltonisme.

Par Alexandre Plennevaux
https://medium.com/scribe/comprendre-le-daltonisme-ffc73e81666f

Tips for designing scientific figures for color blind readers

Par Luke
http://www.somersault1824.com/tips-for-designing-scientific-figures-for-color-blind-readers/

Visolve

The assistive software for people with color blindness
http://www.ryobi-sol.co.jp/visolve/en/

Visionary, ou rendre le web accessible aux daltoniens

Dans France Diplomatie
Lire l'articles

ColorBrewer

Outil fournissant des palettes de couleurs adaptées aux personnes daltoniennes
http://colorbrewer2.org/

Snook Color Contrast Checker

Un indicateur de différence de contraste en précisant la conformité aux critères WCAG 2.
Snook Color Contrast Checker

W3

Colour blindness accessibility Community Group

The aim of our project is to build new HTML5 specifications that can be used later by developers who wish to create more accessible websites for colour-blind people.
The W3C page