Blog

Outils d’accessibilité des couleurs

Utilisez des outils d’accessibilité des couleurs pour améliorer la conception de votre site Web

Saviez-vous que plus de 4% de la population est daltonienne ? Différentes variations du daltonisme et d’autres troubles de la vue peuvent avoir une incidence sur la lisibilité et la convivialité de votre site Web.

C’est à vous de vous assurer que votre conception est accessible à tous les utilisateurs, quelle que soit leur perception des couleurs .

Et c’est plus facile que vous ne le pensez avec le bon ensemble d’outils.

Qu’est-ce que l’accessibilité?

color-accessibilite_01

Il existe de nombreux contrôles et normes d’accessibilité en matière de conception de sites Web, l’objectif général étant de fournir une conception de site Web que tout utilisateur puisse comprendre facilement.

Les problèmes d’accessibilité vont de l’audio à la navigation, en passant par les commentaires, les propriétés du texte et la couleur. Nous allons nous concentrer sur ce dernier point, car il peut être l’une des choses les plus faciles à identifier au début du processus de conception et à corriger avant que des problèmes ne surviennent.

Différentes variations des déficiences visuelles, y compris le daltonisme, constituent la principale préoccupation lorsqu’il s’agit d’un support visuel, tel qu’un site Web. Selon Color Blind Awareness, 1 homme sur 12 et 1 femme sur 200 dans le monde souffrent d’une forme de déficience de la vision des couleurs .

Vous pouvez comparer ici les différents types de vision des couleurs, avec des explications sur chaque type .

Directives et normes d’accessibilité

En ce qui concerne la couleur et l’accessibilité, la principale préoccupation est le contraste.

Cela inclut le contraste des couleurs au premier plan et à l’arrière-plan, le contraste des couleurs du texte (y compris le poids et la taille) et le contraste des couleurs de tous les éléments de l’interface utilisateur.

Il existe un document décrivant les meilleures pratiques pour l’accessibilité Web, y compris la couleur. Les directives pour l’accessibilité des contacts Web (WCAG) sont dans la version 2.1 et couvrent tout ce dont vous avez besoin pour rendre un site Web plus accessible. Vous pouvez en apprendre plus sur ces directives ici .

En ce qui concerne la couleur, voici la recommandation : «La couleur n’est pas le seul moyen visuel de transmettre des informations, d’indiquer une action, de susciter une réponse ou de distinguer un élément visuel.»

Meilleures pratiques d’accessibilité des couleurs :

  • Fournir un contraste suffisant entre l’arrière-plan et le premier plan; cela s’applique aux éléments de tout type qui se rapportent les uns aux autres
  • Utilisez la couleur et quelque chose d’autre pour transmettre des informations
  • Assurez-vous que les éléments interactifs et la navigation sont identifiables (des changements de couleur subtils en survolant ne suffisent pas)
  • Assurez-vous que les étiquettes de formulaire ont une couleur facile à lire. appliquer cela aux erreurs et aux commentaires aussi bien
  • Le texte et les éléments interactifs doivent avoir un rapport de contraste d’au moins 4,5 pour 1.

10 outils d’accessibilité des couleurs

Il existe de nombreux excellents outils pour vous aider à tout contrôler, du contraste aux combinaisons de couleurs à la construction d’une palette aussi accessible que possible.

Voici quelques exemples qui sont exceptionnellement utiles.

Vérificateur de contraste de couleurs WebAIM

color-accessibilite_02

WebAIM Color Contrast Checker vérifie le rapport de contraste entre les couleurs d’arrière-plan et de premier plan. Visez un ratio de 4,5: 1 ou plus.

Colorable

color-accessibilite_03

Colorable teste le contraste en utilisant la différence de luminance qui permet de distinguer chaque couleur. Il utilise plus que la teinte de base mais prend également en compte la luminosité et les objets environnants.

Couleur sûre

color-accessibilite_04

Color Safe vous aide à créer des palettes de couleurs accessibles basées sur les directives WCAG. Ces palettes vous garantissent d’utiliser les ratios d’arrière-plan et de contraste appropriés pour une lisibilité optimale.

Directives d’accessibilité Web

color-accessibilite_05

Les directives pour l’accessibilité du Web ont un contraste de couleur froid qui affiche différentes couleurs sur différents arrière-plans, ce qui facilite la lecture du contenu. Utilisez-le pour créer des options de fond et de texte claires et compréhensibles.

Rigide

color-accessibilite_06

Stark est un plugin Adobe XD and Sketch que vous pouvez utiliser pour tester l’accessibilité lorsque vous travaillez sur des dessins. Testez le contraste, effectuez une simulation de daltonisme ou obtenez des suggestions d’amélioration des couleurs.

Des couleurs pour tous

color-accessibilite_07

Couleurs pour tous est un tableau visuel de couleurs géant dans une grille qui montre des pings pour des combinaisons conformes aux normes WCAG.

Filtre de pages Web daltoniennes

color-accessibilite_08

Le filtre de page Web Couleur Blind de Toptal vous permet de définir une URL, de définir un filtre de vision et de voir à quoi ressemble la page. Cela peut être un excellent test pour vous aider à visualiser à quel point une conception est accessible.

Examen de la couleur

color-accessibilite_09

Color Review est une application avec des outils de nuance et de pipette pour vous aider à vérifier le contraste des couleurs. Vous pouvez également l’utiliser dans le navigateur. Parcourez des couleurs aléatoires pour obtenir un exemple de difficulté de lecture.

Couleurs

color-accessibilite_10

Couleurs comprend 90 combinaisons de paires de couleurs pour la conception de sites Web accessibles. Chaque combinaison indique un repère et un ratio de taille afin que vous sachiez quelle est la performance de chaque paire. C’est un excellent point de départ si vous souhaitez créer des palettes de couleurs accessibles .

Grille de contraste

color-accessibilite_11

La grille de contraste vous permet de tester la compatibilité des combinaisons de premier plan et d’arrière-plan avec les exigences de contraste minimum de WCAG. Vous pouvez entrer les couleurs de votre choix pour créer une grille pour vos options de conception.

Conclusion

Lorsqu’il s’agit de concevoir un site Web, l’accessibilité est importante. Même si vous avez une vision parfaite des couleurs, vous devez prendre du recul et penser au design en prenant compte du visiteur.