Concevoir pour et en tant que daltonien

Le daltonisme est une déficience légère qui entraîne une capacité réduite des personnes affectées à distinguer les couleurs des autres. Cela peut être un réel inconvénient pour tous les concepteurs, car la théorie des couleurs fait partie intégrante d'un design réussi, et de nombreuses décisions sont basées sur le ressenti et l'émotion découlant des décisions de conception, plutôt que sur un ensemble générique de directives et de taxonomies..

Vous avez probablement déjà beaucoup entendu parler de l'accessibilité dans la conception Web; Il est important de s’adresser au public le plus large qui pourrait avoir des problèmes avec votre site Web s’il n’est pas conçu de la bonne manière. En prime, nous y reviendrons un peu plus tard, mais l’objet principal de cet article est de regarder comment un daltonien designer peut encore adapter avec succès la conception d'un site Web.

Dans l'article d'aujourd'hui, nous allons voir comment les concepteurs daltoniens peuvent toujours créer une étude de cas réussie pour une bonne utilisation de la couleur et comment les non-victimes peuvent toujours prendre en compte les besoins de leur public daltonien..


Comprendre le daltonisme

Comme je l'ai dit précédemment, le daltonisme est un handicap léger dans lequel la distinction de la couleur peut être un problème. En bref, les personnes souffrant de daltonisme ne peuvent pas identifier certaines couleurs parmi des couleurs similaires, ou tout simplement aucune..

Il existe plusieurs types de daltonisme. Le daltonisme total ("monochromie") est une condition très rare, dans laquelle les gens ne voient que différents tons et niveaux de luminosité, sans aucune couleur. Cependant, les cas les plus courants sont l’incapacité à reconnaître le bleu / jaune ou le rouge / vert, ce dernier étant le plus courant des deux..

Des tests ont été mis au point pour reconnaître le daltonisme, normalement en demandant à la victime potentielle de reconnaître un message composé de points. Les victimes et les non-victimes verront différents messages, ce qui leur permettra de déterminer s'ils souffrent..


Que voyez-vous dans ce cercle de points? Les personnes non affectées devraient voir le numéro "74", mais les personnes atteintes pourraient en voir 21, ou rien du tout..

J'espère que l'image ci-dessus représente mieux ce que j'essaie de faire comprendre. Vos couleurs peuvent être perçues différemment par les deux groupes (victimes et non atteintes), ce qui invalide votre palette de couleurs non modifiée. Une personne pourrait en voir 74, mais une victime pourrait la manquer complètement et lui permettre de passer complètement inaperçue.


Un peu de couleur

Nous avons déjà un article ici sur Webdesigntuts + sur la théorie des couleurs, que vous devriez probablement lire avant de continuer. Thomas Cannon fait un sacré bon travail pour expliquer la théorie des couleurs.

La théorie des couleurs couvre en fait un certain nombre de choses, mais au niveau le plus élémentaire, il s'agit de l'interaction des couleurs dans un dessin grâce à la complémentation, au contraste et au dynamisme..

Comme vous le savez probablement, les couleurs sur le Web sont généralement appelées codes hexadécimaux. quelque chose comme # ff0000. Notre navigateur les traduit ensuite intelligemment en valeurs RVB afin de restituer la couleur que nous lui avons demandée. Si vous voulez plonger un peu plus profondément, les codes hexadécimaux sont réellement très intéressants, car vous pouvez les décomposer afin de connaître les spécifications pour le rouge, le vert et le bleu, grâce aux valeurs allant de 0 à 9 ou de A à F.

Heureusement, les types créatifs disposent depuis longtemps d'un très bon outil pour les aider à définir les couleurs qui vont bien ensemble: la roue des couleurs. La roue des couleurs est une forme de couleur en forme de beignet, issue des trois couleurs primaires: rouge, jaune et bleu. C’est au-delà de l’horizon de cet article d’entrer dans trop de détails ici (et, en plus, je marcherais sur les mêmes traces que Thomas), je ne vais donc pas aller plus loin que de dire que cette roue peut nous aider à déterminer laquelle les couleurs ont une chimie naturelle.

Une palette de couleurs est simplement un ensemble logique de couleurs qui vont ensemble, et celles-ci proviennent de la roue des couleurs. Il y a une poignée de méthodes différentes pour sélectionner les couleurs dans la roue des couleurs, que vous pouvez découvrir dans la dernière partie de l'article de Thomas.

Maintenant que nous en savons un peu plus sur la façon dont fonctionnent les couleurs et les combinaisons de couleurs, voyons comment nous pouvons "assumer" des combinaisons qui vont naturellement s'emboîter..


Concevoir en tant que: couleurs monochromes

Les combinaisons de couleurs monochromatiques ne doivent pas être confondues avec la monochromie. La monochromie est le daltonisme dont nous avons parlé plus tôt, ce qui est très rare et fait que le patient ne voit qu'une seule couleur, dans de multiples nuances. En fait, le monochrome est conçu pour être utilisé de la sorte, avec des conceptions consistant entièrement en une seule couleur dans plusieurs nuances, plutôt qu'en utilisant plusieurs couleurs..

L'utilisation d'un jeu de couleurs monochromatique n'est pas nécessairement un obstacle. En fait, il peut être très avantageux de donner une unité à votre projet. Et le noir? Bien sûr, vous pouvez classer le noir comme seconde couleur, mais vous pouvez toujours obtenir un contraste similaire en utilisant simplement une variante très sombre de la couleur que vous avez choisie..

Obtenir un contraste est très simple avec un jeu de couleurs monochromatique. Puisque les daltoniens peuvent toujours reconnaître différentes nuances de couleur, il n’est pas problématique d’introduire un contraste, car il est reconnu de la même manière..

Bien sûr, un jeu de couleurs monochromatique peut être utilisé avec n'importe quelle couleur et peut être très efficace de cette manière. Cependant, pour ceux qui ont immédiatement pensé «noir et blanc» quand j'ai parlé du monochrome, c'est aussi efficace. Beaucoup de sites minimalistes utilisent un jeu de couleurs en niveaux de gris, ce qui ne devrait poser aucun problème à quiconque de le visualiser de la manière prévue. Si vous souhaitez rester en sécurité, les niveaux de gris peuvent sembler géniaux, tant qu'ils s'intègrent parfaitement au ton et à la convivialité de votre conception..


Concevoir pour: Contraste élevé

Un contraste élevé est vraiment important car c'est un excellent moyen de créer un jeu de couleurs cohérent sans avoir à se soucier du parc de couleurs. Nous pouvons créer des nuances très claires à très sombres d'une seule couleur, ce qui nous donne une richesse de valeurs différentes à utiliser. Par exemple, si vous utilisiez un bleu clair pour votre arrière-plan, vous voudriez utiliser un bleu beaucoup plus foncé pour le texte afin de garder votre texte lisible..

L'utilisation de monochromes offre aux visiteurs daltoniens une manière d'apprécier facilement votre dessin, même s'ils ne peuvent pas nécessairement identifier les couleurs souhaitées. Cependant, le contraste élevé offre de nombreuses améliorations en termes de lisibilité à tout utilisateur et constitue un principe de conception dont nous devons tenir compte, loin de l'accessibilité..


Concevoir pour: Teinte, Saturation et Luminosité

Tout comme la modification du contraste, modifier la teinte, la saturation et la luminosité des couleurs peut nous aider à montrer la définition et à permettre aux utilisateurs de distinguer sans utiliser plusieurs couleurs. En collant avec un petit jeu de couleurs, voire avec un seul, changer la saturation peut vraiment montrer un contraste distinctif à l'intérieur de deux échantillons d'une couleur, tout comme la luminosité et la teinte..

Ces méthodes permettent aux concepteurs daltoniens de définir facilement différents éléments de leur conception à l'aide de couleurs, sans avoir à se soucier de l'esthétique, comme s'ils ajoutaient une nouvelle couleur au mélange. Pour les visiteurs daltoniens, cela permet de distinguer facilement différentes parties.


Ces deux exemples ont commencé comme des doublons exacts. Cependant, la teinte a été légèrement augmentée à droite.

Designing As: "Emprunter" Couleurs

Ceci est principalement une astuce destinée aux concepteurs daltoniens, plutôt qu'à ceux qui considèrent simplement leur public daltonien..

Il est incroyablement facile "d'emprunter" des couleurs à d'autres conceptions Web, ou à d'autres conceptions non basées sur le Web, de nos jours. En extrayant simplement l'outil Pipette de notre arsenal d'outils d'édition graphique, nous pouvons facilement identifier les couleurs dans un dessin et commencer à les utiliser dans le nôtre. "Voler" des couleurs peut être un moyen très efficace d'identifier ce qui fonctionne bien et de le reproduire sous une forme différente tout en maintenant les intentions de réussite d'un modèle réussi..

Bien sûr, c'est une sorte de tricherie, mais pas tant que ça vole. Nous choisissons simplement des couleurs dans des conceptions Web qui fonctionnent bien et nous n'interrompons pas des éléments entiers. Heureusement, la couleur n'est pas protégée par le droit d'auteur.

Une fois que nous avons identifié les couleurs et les avons représentées par des valeurs hexadécimales, nous pouvons les utiliser en association avec d’autres méthodes (telles que l’utilisation d’une couleur unique avec plusieurs nuances, comme indiqué ci-dessus). C’est peut-être plus difficile, mais assurez-vous de varier votre palette et de l’inventer vous-même, sans retirer tout le schéma de la conception d’un autre.


Concevoir pour: sélectionner des couleurs avec des outils spécialisés

Si vous concevez tout en tenant compte des daltoniens, il existe plusieurs outils en ligne qui vous permettent de simuler des couleurs individuelles dans des conditions daltoniennes..

Ces outils vous donnent une idée de ce que les visiteurs daltoniens verront et vous permettent de sélectionner avec soin les couleurs en veillant à ce qu'elles soient belles pour les visiteurs réguliers et souffrant. Le premier outil, le Laboratoire de couleurs, vous permet de vérifier l’apparence des couleurs les unes avec les autres. Vous pouvez ainsi créer facilement des combinaisons de couleurs qui conviennent à tout utilisateur, qu’il en soit un ou non, sur n’importe quel système d’exploitation..

Le second outil est un formulaire simple qui vous permet de coller votre code HTML et d’échanger les valeurs de couleur hexadécimales avec l’équivalent daltonien, ce qui vous permet de les modifier facilement afin de créer une palette attrayante pour les personnes souffrant ou non..


Concevoir pour: ne pas associer la couleur à la rétroaction

Next up est un conseil principalement destiné aux concepteurs considérant leur possible public daltonien. Nous supposons naturellement certaines sensations avec la couleur, telles que le rouge avec le danger ou le vert avec la sécurité. L'utilisation de ce principe dans nos conceptions Web est un excellent moyen d'associer immédiatement le résultat d'une action donnée, mais uniquement à ceux qui ont une vision régulière. Vos visiteurs daltoniens ne font peut-être pas l'association instantanée, ce qui vous suggère d'intégrer une méthode supplémentaire d'avertissement ou d'éloge..

C’est plutôt un point d’utilisation, mais c’est un point que vous devriez probablement prendre en compte afin de minimiser la frustration des utilisateurs. Bien sûr, les daltoniens ne sont pas complètement aveugles à la couleur. Au lieu de cela, ils voient des couleurs différentes de celles que nous voyons et ont donc naturellement associé différentes couleurs à différents messages. Cependant, il est beaucoup plus facile d'assurer la reconnaissance par d'autres moyens aussi.


Bonus: Utiliser le filtre de pages Web Colorblind

Concevoir pour les daltoniens peut être gênant pour les concepteurs qui ne sont pas daltoniens. Comment prenons-nous en compte l'accessibilité lorsque nous ne souffrons pas de la condition actuelle??

Heureusement, il existe une poignée de "simulateurs" d'accessibilité disponibles sur le Web, où une page Web est rendue d'une certaine manière. L'exemple ci-dessous, nommé généralement "Filtre de pages Web Colorblind", prend votre site et le filtre comme si vous étiez daltonien..

L'outil est en cours de développement et le rendu peut être mis à l'affichage. Cependant, la gamme de filtres de couleur disponibles est assez étendue et couvre tous les principaux types de daltonisme..

Vischeck est un autre simulateur permettant de prévisualiser ce qu'un public daltonien verrait: il vous permet de prévisualiser une page Web en direct, ou des images, dans l’un des trois types de déficience de la vision des couleurs. Il a même un outil qui corrigera les images afin que les spectateurs daltoniens puissent les voir naturellement.


Conclusion

Le daltonisme n’est pas un problème rare qui n’affecte qu’une poignée de personnes. En fait, il s'agit d'un problème répandu que de nombreuses personnes rencontrent au quotidien. En tant que concepteurs de sites Web, nous devrions essayer de prendre en compte ces visiteurs du mieux possible. Si nous utilisons la couleur, en combinaison avec une mise en page bien organisée, être daltonien ne devrait pas poser de problème, en termes de lisibilité ou d’esthétique..

Les effets du daltonisme se feront davantage sentir lorsque ce sera le designer qui en souffrira. Heureusement, nous pouvons concevoir en monochrome et créer un design universel et esthétique en utilisant le contraste sur plusieurs couleurs. Il s'avère que le contraste est la clé. En tant que designer, cela ne devrait pas être quelque chose que nous ne savons pas déjà, car le contraste est une clé de la lisibilité d'un design..

Bien entendu, nous comprenons que tout dessin, qu'il soit monochrome ou non, doit avoir un niveau de contraste élevé pour améliorer la lisibilité des éléments d'une page. Cependant, nous pouvons "tricher" et emprunter des couleurs, ou utiliser l'un des outils susmentionnés pour créer des combinaisons de couleurs qui fonctionneront automatiquement pour tout le monde..

Heureusement, le daltonisme n'est pas une plainte massive sur le Web, comme c'est le cas dans d'autres domaines. En apprenant un peu la théorie des couleurs, nous pouvons supposer des schémas sans même les voir du bon œil, vous permettant ainsi d'obtenir des résultats parfaits à chaque fois.