Les couleurs et l’accessibilité

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.

red-green-color-impairment

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 2
    snook-color-contrast
  • ColorSchemeDesigner permet de simuler la vision d’une palette de couleurs par un daltonien grâce à l’outil « vision simulation »
    color-scheme-designer-1
    color-scheme-designer-2

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.merttol.com/articles/web/color-and-accessibility.html

Article également visible sur le site d’Alsacréations (rédigé par moi-même)