Articles Tagués ‘couleur’


En France, la proportion de daltoniens est d’environ 8% chez les hommes et 0,45% chez les femmes (source Wikipédia). Plus de 10% de la population masculine est daltonienne dans le monde, et affectée par une perception des couleurs déficiente. Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite… Bien entendu, il est très difficile, voire impossible d’éviter de mettre sur son site toutes les couleurs qui pourraient être mal perçues.

Cependant, il est à la portée de tout le monde de faire en sorte que les pages soient lisibles par tous, quel que soit le handicap visuel. La première méthode et la plus simple à mettre en œuvre est l’emploi d’un contraste élevé entre l’arrière plan et les couleurs utilisées pour le contenu de la page.

schéma de contrastes pour daltoniens

 

Dans cet exemple on voit bien que C et E sont plus facilement lisibles parce que le contraste est assez fort. L’affichage de votre page en niveaux de gris peut montrer si oui ou non il y a suffisamment de contraste. Il existe également plusieurs outils en ligne pour effectuer des tests :

  • Snook Color Contratst Checker permet d’indiquer si la différence de contraste entre les couleurs est suffisant pour les différents types daltonisme, en précisant la conformité aux critères WCAG 2Snook Color Contratst Checker
  • ColorSchemeDesigner permet de simuler la vision d’une palette de couleurs par un daltonien grâce à l’outil « vision simulation »Capture de Color Scheme Designer

    Capture de Color Scheme Designer

En plus de faire attention aux couleurs employées, je vous rappelle qu’il est important de garder à l’esprit que la couleur ne soit jamais la seule indication de sens. Par exemple :

  • distinguer les liens du texte normal en les soulignant
  • ne pas conditionner les actions de l’utilisateur en faisant appel aux couleurs (ex : « cliquez sur le bouton rouge »)
  • toujours prévoir une alternative texte pour les images (attribut alt)
  • le texte ne doit pas être remplacé par une image (sans alternative) pour permettre à l’utilisateur de l’agrandir ou d’utiliser sa propre feuille de style contrastée

source : http://www.alsacreations.com