Pratiques UI: Concevoir pour les daltoniens
Le daltonisme est bien connu par le commun des mortels. Pour les designers, c’est un paramètre régissant certaines règles de la conception UI.
En France, près de 8,5 % de la population masculine (presque 1 sur 10) est atteinte de daltonisme. Les femmes sont considérablement moins touchées avec une population féminine daltonienne de 0,5 % (c’est une anomalie qui touche le chromosome X).
Ces chiffres clés peuvent vous paraître anodins, mais il suffit de les projeter sur la proportion des utilisateurs d’un site web ou d’une application mobile. En pratique, il s’agirait de 4 % des visiteurs d’une plateforme numérique qui ne la voient pas telle qu’elle a été conçue par son designer UI. C’est un chiffre considérable, qui influence directement les taux de satisfaction et de conversions.
Pour cela, les bonnes pratiques UI pour la conception inclusive des daltoniens doivent être prises en compte par les as du design.
C’est quoi être daltonien ?
La dyschromatopsie partielle, plus communément appelée daltonisme, est une affection de la vue généralement génétique/ héréditaire, qui empêche de discerner certaines couleurs.
Elle est causée par la déficience d’un ou plusieurs des trois types de cônes de la rétine oculaire.
Cette atteinte reste une infirmité légère et se caractérise par un déficit visuel des couleurs. Il existe plusieurs formes de dyschromatopsie partielle.
Le daltonisme se manifeste par une perception défaillante en particulier du rouge (qui est la forme la plus répandue de dyschromatopsie et peut se présenter sous forme de protanopie ou de protanomalie), du vert (la deutéranopie ou la deutéranomalie), et plus rarement du bleu (la tritanopie ou bien la tritanomalie).
Cette anomalie de la vision a été décrite il y a deux siècles par le physicien et chimiste anglais John Dalton en 1789, après avoir découvert son propre trouble de la couleur. Il était en effet atteint de deutéranopie, et ce dernier était incapable de distinguer le rouge du vert (les autres formes de déficience des couleurs ne sont considérées daltonismes que par abus de langage.)
Design UI pour les daltoniens : la clarification des éléments visuels est de mise
Même si le daltonisme est considéré comme étant un handicap, il ne pose généralement pas de problème de vie à l’individu atteint. On ne peut souffrir par le manque de quelque chose dont on ignore l’existence. En effet, les ultraviolets ou les infrarouges existent bel et bien, mais personne ne souffre de l’incapacité à les voir puisqu’on n’a aucune conscience de leur existence.
Toutefois, le daltonisme peut s’avérer gênant lorsque l’individu atteint se trouve dans une situation où faire une distinction entre les couleurs devient nécessaire. Ceci lui est bien évidemment imposé par les constructions sociétales usant des codes couleurs. Ainsi, le daltonien doit se conformer aux distinctions établies par les personnes non atteintes qui ne le prennent pas en considération. Par conséquent, il se confronte à la triste réalité que, parfois, son infirmité légère peut lourdement handicaper sa faculté à percevoir et traiter certaines informations.
Dans un monde qui se veut plus inclusif et plus prévenant envers les minorités, on remarque des efforts concernant le daltonisme impliquant la clarification des couleurs et des éléments visuels importants (comme la signalisation routière ou la conception cartographique).
Même si ces actions louables permettent une distinction correcte des éléments importants, de nombreux efforts restent encore à faire par tous les designers, qui, parfois, abusent des distinctions colorées signifiantes non expliquées autrement, des choix de couleurs inappropriés, ou par négligence envers l’importance du contraste et des textures.
Majoritairement par ignorance, parfois par nonchalance, les concepteurs n’ont pas conscience que leur choix de palette de couleurs peut s’avérer tellement subjectif et biaisé, qu’il n’est pas lisible ou visible pour un nombre conséquent de personnes. Ceci affecte directement l’expérience utilisateur et la détériore, étant donné que l’UX de tout produit/service se veut absolument humaniste, universelle et inclusive.
L’un des fondements d’un bon UI/UX design, c’est que les concepteurs UI et les responsables de l’UX doivent refléter le besoin de l’utilisateur en laissant de côté leurs préférences personnelles en termes graphiques. Les daltoniens éprouvent des besoins différents que les personnes ayant une vue dite normale, et ces besoins sont absolument à connaître et à prendre en compte par les équipes UI. La subjectivité en ce qu’il s’agit des critères de beauté est particulièrement nocive en design.
Concevoir pour daltonien: l’accessibilité pour mot d’ordre
Si la conception se base sur le fait que les équipes de designers n’ont aucune difficulté à percevoir les distinctions de couleurs, c’est qu’elle est fortement biaisée et non-inclusive. C’est un signe qu’on est en présence d’un design qui peut être amélioré considérablement. Pour cela, il existe des règles d’accessibilité établies pour faciliter les conceptions universelles, et qui sont très bien adaptées aux daltoniens. Il est donc très simple pour les UI designers de connaître et suivre les recommandations W3C. Ces recommandations en termes d’UI sont très simples à mettre en œuvre, tout en étant très utiles en termes de lisibilité et de contraste adaptés au daltonisme. C’est de la sorte qu’on pourra éviter q’une infirmité légère ne se transforme en un handicap conséquent, à cause d’une conception UI non conforme.
Les bons produits numériques sont destinés à être utilisés par tout le monde, même les personnes atteintes de handicap ou de troubles de toute nature (visuels, auditifs, cognitifs, de motricité, de la parole…). Pour cela, le souci de l’accessibilité et de l’inclusion doit être présent chez tout concepteur d’interface (UI) et d’expérience utilisateur (UX).
Afin d’attirer encore plus d’utilisateurs, aucune tranche de la population ne doit être négligée. La conception universelle augmente l’accessibilité et permet à tout utilisateur, même issu des souches minoritaires de la population, à tirer le meilleur parti du design de votre produit/service. Grâce à cette conception universelle, une personne daltonienne ne passera pas à côté des détails fondamentaux de votre UI/UX
Les recommandations pour une conception universelle sont définies par le consortium W3C à travers les Règles pour l’accessibilité des contenus Web 2.1 (WCAG).
En s’y référant, l’UI designer sera en mesure d’assurer une conception conforme aux critères d’accessibilité, sans pour autant interférer avec la charte graphique ou l’UX de l’interface.
En effet, ces exhortations serviront à orienter votre conception universelle UX/UI pour la rendre plus accessible. En d’autres termes, elles serviront à étendre la compatibilité de votre interface aux besoins d’un maximum d’utilisateurs, à l’instar des daltoniens.
Quelques bonnes pratiques :
La couleur :
Bien manier les couleurs est de mise quand on cherche à concevoir une interface parfaitement optimisée pour les daltoniens. Alors, les bonnes pratiques UI sont multiples et très évidentes.
Tout d’abord, il faut éviter d’utiliser uniquement la couleur comme véhicule de communication avec l’utilisateur (que ce soit pour transmettre des informations ou pour inviter un internaute à passer à l’action, etc). Ce faisant, vous pourrez vous assurer que votre UI est adaptée, et qu’aucun utilisateur (même daltoniens) ne passe à côté des messages clés de votre interface. Une astuce simple s’agit de préconiser l’utilisation de la couleur couplée à d’autres indicateurs qui peuvent prendre la forme de symboles, de formes, de textes, d’étiquettes ou encore d’icônes. Sur un site ou une application de vente en ligne, il est très utile de décrire les couleurs (préciser la couleur d’un vêtement, d’un meuble, etc.)
Ensuite, pour un daltonien, les textes en couleur sont assez difficiles à déchiffrer sur des arrière-plans de couleur proche. Pour remédier à ce problème, évaluez vos pages en noir et blanc et dans teintes de gris afin de déterminer leur lisibilité.
N’hésitez pas également à recourir aux bordures épaisses, au texte en gras, en italique ou souligné dans vos conceptions UI.
Sur un autre plan, il est important de soigner correctement les combinaisons choisies pour votre palette de couleur. Afin d’avoir une interface optimisée pour les daltoniens, les associations vert/rouge, vert/marron, vert/bleu ou encore bleu/violet, sont à exclure.
Le contraste :
Pour un daltonien, la différenciation entre certains pigments est impossible (ou bien la perception de la pigmentation des couleurs est altérée).
Ceci revient automatiquement à une désaturation partielle de certaines couleurs. C’est ainsi que la saturation joue un rôle remarquable lors de la conception pour les daltoniens.
Un contraste trop faible s’avère gênant même pour les utilisateurs à la vue irréprochable, alors vous pouvez imaginer le rendu sur une personne présentant des anomalies visuelles. La réponse est simple: les interfaces à faible contraste deviennent floues et les couleurs indistinctes. Ainsi, le choix de couleurs, de teintes et de contrastes est essentiel pour optimiser votre design. Pour ne pas exclure les utilisateurs dont la vue est faible, et notamment les daltoniens, il suffit d’appliquer les principes de conception universelle en réhaussant le contraste, autant pour les éléments graphiques textuels que non textuels.
Les recommandations des WCAG proposent l’ajout de couleurs plus contrastées à la palette générale de couleur de l’interface UI. Côté texte, la règle dit que le rapport de contraste entre le texte et son arrière-plan doit être d’au moins 4,5 pour 1.
Il y a bien évidemment des exceptions notamment si :
- La taille de la police choisie est d’au moins 24 px (ou 19 px si elle est en gras), le rapport minimum peut être ramené à 3 pour 1.
- Il s’agit du texte (ou des images du texte) d’un composant inactif de l’interface utilisateur. Il n’est pas soumis à des exigences de contraste.
- Il s’agit du texte d’un logo d’entreprise, d’une marque ou d’un logotype qui n’est pas non plus soumis à ces exigences.
Les motifs et textures :
Le contraste des couleurs n’est parfois pas suffisant pour que des daltoniens puissent aisément identifier certains graphiques, à l’instar des histogrammes ou des diagrammes. La solution ? Ajouter des motifs et textures pour favoriser leur identification par tous les utilisateurs.
Utiliser des contrastes de formes ou de textures met en évidence des informations clés pour les daltoniens. A titre d’exemple, n’hésitez pas à mettre en exergues le secteur d’un diagramme en le hachurant au lieu d’utiliser uniquement des couleurs de remplissage.
A cet effet, il faut également éviter les légendes où apparaissent seulement des carrés reprenant uniquement les couleurs présents mais également les motifs et textures utilisés, tout en privilégiant les étiquettes textuelles dans les graphiques.
Les outils efficaces :
Afin d’être sûr que les éléments UI votre interface répondent aux exigences de couleur et de contraste adaptées au daltonisme, il existe une panoplie d’outils qui peuvent vous aider dans votre démarche.
Voici quelques options :
- Colour Contrast Analyser: L’outil permet de vérifier de manière précise si les associations de couleur sont conformes aux recommandations W3C en termes de lisibilité et de contraste.
- Color oracle : Simulateur de daltonisme sur tout l’écran de l’ordinateur. Pour ce faire, il s’intègre dans la barre des tâches de Windows. Il existe également dans des versions pour Mac et Linux.
Mais aussi: WebAIM, Contrast, SimDaltonism, ColorDoctor, ColorSchemeDesigner, Vischeck…
Conclusion
La conception UI adaptée au daltonisme est largement possible, bien plus encore, elle s’avère très simple. En tant que designer, il suffit d’accorder de l’importance à certains détails et d’appliquer des recommandations évidentes.
De ce fait, la conception universelle bienveillante envers les daltoniens ne risque pas d’alourdir l’interface ou l’expérience utilisateur. Bien au contraire, une conception universelle inclusive des daltoniens permet de diluer totalement les risques de confusion en termes d’UI, et assure un choix de couleurs et de contrastes optimal pour les designers UI.
Elle garantit également une meilleure UX pour le plus grand nombre possible d’utilisateurs, tout en présentant un design graphique compréhensible, inclusif et complet.
Quelques préconisations sont à retenir absolument lors de la conception UI pour les daltoniens, comme le fait d’assurer des contrastes minimum, et de ne pas utiliser la couleur comme signifiant unique mais de recourir également aux textures, icônes, labels, souligné, contrastes de formes…
by 
