Les couleurs et l'accessibilité

Alors que les daltoniens représentent environ 8% de la population masculine française, quelques règles s'imposent pour bien choisir les couleurs d'une page Web.

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.

dalto 1
Comparaison des choix de couleurs en termes de contraste. © Alsacreations


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 suffisante pour les différents types de daltonisme, en précisant la conformité aux critères WCAG 2.

snook color contrast 2
Copie d'écran de Snook Color Contratst Checker . © Alsacreations

 ColorSchemeDesigner permet de simuler la vision d'une palette de couleurs par un daltonien grâce à l'outil "vision simulation".

color scheme designer 1
Copies d'écran de ColorSchemeDesigner. © Alsacreations

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.

Article publié sous licence Creative Commons par julixyde (Fegersheim) sur le site Alsacreations.