100 lines
4.7 KiB
Org Mode
100 lines
4.7 KiB
Org Mode
|
#+title: Au delà des couleurs, des interfaces adaptées au daltonisme
|
||
|
|
#+date: <2021-10-22 ven.>
|
||
|
|
#+html_link_up:../roadmap.html
|
||
|
|
|
||
|
|
* Introduction
|
||
|
|
|
||
|
|
[[https://devfest2019.gdgnantes.com/sessions/au_dela_des_couleurs__des_interfaces_adaptees_au_daltonisme/][Conférence DevFest 2019]] - [[https://twitter.com/Laoraw][Twitter]]
|
||
|
|
|
||
|
|
Conférence faite par Laura Wacrenier, UX Designer chez SonarSource (éditeur de SonarQube).
|
||
|
|
|
||
|
|
* 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.
|
||
|
|
|
||
|
|
* Bonnes pratiques
|
||
|
|
|
||
|
|
** Contrastes
|
||
|
|
|
||
|
|
*** 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
|
||
|
|
|
||
|
|
*** 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
|
||
|
|
- Let's get colorblind :: plugin FireFox
|
||
|
|
- Color Oracle :: 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.*
|
||
|
|
|
||
|
|
*** 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
|
||
|
|
|
||
|
|
** 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.
|
||
|
|
|
||
|
|
** 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.
|
||
|
|
|
||
|
|
** Web 2.0
|
||
|
|
|
||
|
|
Le standart du web 2.0 souhaite qu'on souligne les liens. Cela permet de les rendre plus visibles.
|
||
|
|
|
||
|
|
** 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.
|
||
|
|
|
||
|
|
** 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
|
||
|
|
|
||
|
|
* 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.
|
||
|
|
|
||
|
|
#+BEGIN_QUOTE
|
||
|
|
Solve for one, extend to many. ---Microsoft Inclusive Design
|
||
|
|
#+END_QUOTE
|
||
|
|
|
||
|
|
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.
|