Au delà des couleurs, des interfaces adaptées au daltonisme
Table of Contents
1. Introduction
Conférence DevFest 2019 - Twitter
Conférence faite par Laura Wacrenier, UX Designer chez SonarSource (éditeur de SonarQube).
2. Le daltonisme
Le daltonisme touche 8% de la population masculine caucasienne, 7% et 4% dans les populations asiatique et africaine. Seul 0.5% des femmes sont touchées par le daltonisme. Cela s'explique par le fait que le gêne responsable du daltonisme est le gêne X.
Dans un oeil normal, des connes bleu, vert et rouge tapissent le fond de la rétine. Le daltonisme va faire muter ou disparaitre un ou des connes. La forme de daltonisme la plus courante est celle qui affecte le conne vert: enrivon 6% des hommes dans le monde sont touchés.
Les couleurs vertes se fondent avec les couleurs jaunes et rouges, le violet disparait aussi.
3. Bonnes pratiques
3.1. Contrastes
3.1.1. Des textes
- C'est quoi ?
Le contraste est la différence de couleur entre la couleur du texte et celle de son arrière plan.
Il existe des recommendations pour l'accessibilité: les WCAG (Web Content Accessiblity Guidelines). Ils ont fait plusieurs notes pour savoir si un site est accessible:
- A
- note minimum pour avoir un texte lisible
- AAA
- tout le monde peut lire le texte
- Les outils
Il existe de nombreux sites web qui permettent de voir le contraste sur son site:
- webaim color contrast checker
- tanaguru contrast finder : conseille des palettes
- les outils intégrés aux navigateurs
- plugins pour les outils de design
3.1.2. Des éléments non textuels
Il est aussi possible de s'appuyer sur les WCAG en utilisant 2 couleurs proches. Un bon exemple est les routes sur l'interface de GMaps (bande de couleurs collées les unes aux autres).
Pour se rendre compte rapidement si des éléments non textuels sont accessibles, il suffit de mettre l'interface avec un filtre noir et blanc. Si on ne s'y retrouve plus, il n'y a pas assez de contraste. Il existe aussi des outils pour ce faire:
- plugins pour les outils de design
- plugin FireFox
- logiciel pour passer l'interface du PC en noir et blanc (a aussi des filtres pour les différents types de daltonisme)
La couleur n'est qu'une information supplémentaire et ne doit pas la contenir.
3.1.3. Des Formes
Rajouter des formes pour préciser des informations, mettre le bouton en valeur avec une icone et un fond. Exemples:
- Spotify et le cercle en dessous du mode aléatoire s'il est sélectionné.
- SonarQube et les espaces blancs entre 2 couleurs sur des diagrammes camemberts
3.2. Iconographie
Mettre une icone symbolisant l'action / le message. Rajouter du texte pour expliquer en cas de soucis et non pas juste encadrer le soucis en rouge.
3.3. Labels / Description de couleur
Mettre la légende du graphique directement dans les parties concernées. Rajouter le nom basique de la couleur sous celle-ci lorsqu'on peut en choisir plusieurs.
3.4. Web 2.0
Le standart du web 2.0 souhaite qu'on souligne les liens. Cela permet de les rendre plus visibles.
3.5. Le mode spécial daltonien
Il ne devrait pas exister ou du moins être activé par défaut. Les daltoniens n'ont pas forcément le temps / envie de chercher dans les paramètres.
3.6. En conclusion
- contraste texte minimum AA
- ne pas utiliser les couleurs comme signifiant
- utiliser la texture, icones, labels, contraste de formes à la place
- liens soulignés
4. Comment convaincre l'équipe
Les personnes en situation de handicap sont une minorité, cela peut freiner les supérieurs à faire des aménagements pour moins de 5% des utilisateurs. Cependant, ces améliorations sont bénéfiques à tout le monde. Personne ne se plaint d'un site web trop facile à lire.
Solve for one, extend to many. —Microsoft Inclusive Design
Exemples de cas où une interface accessible bénificie à tout le monde:
- handicape temporaire (cataracte…)
- indiquation de la couleur pour la chemise noir et bleue foncée pour éviter de se tromper avec une mauvaise luminosité
- contraste fort sur gmaps pour pouvoir voir rapidement l'application lorsqu'il y a beaucoup de soleil
Tout le monde peut-être distrait ou impatient. Tout le monde vieillit. La mise en place d'un standart maintenant permet de nous faciliter la vie dans plusieurs années. Les designs trop simples sont l'équivalent d'un auto-sabotage.