Jour 39 - Couleur et information

Comment utiliser la couleur pour véhiculer de l’information ?

Ce que j’ai fait :

Ce que j’ai appris

Ne pas utiliser la couleur comme unique vecteur d’information

Le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) donne le critère suivant :

Critère 3.1. Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?

Concrètement, on ne doit pas utiliser la couleur comme seul moyen visuel de véhiculer une information, d’indiquer une action, de solliciter une réponse ou de distinguer un élément visuel.

Les personnes impactées par le non-respect de cette règle sont :

  • les personnes aveugles et mal-voyantes
  • les personnes âgées qui ont du mal à distinguer les couleurs
  • les personnes utilisant des écrans en texte seul, en couleurs limitées ou monochromes

Il peut en résulter une perte d’information mais également l’impossibilité d’utiliser certaines fonctionnalités. Par exemple :

  • les liens hypertextes se distinguent du reste du texte uniquement par la couleur

  • dans un formulaire, les champs comportant une erreur sont signalés uniquement par une bordure rouge

  • dans une graphique, chaque partie est colorée différemment des autres sans information supplémentaire

  • dans une vidéo, l’information est véhiculée uniquement par le son : on ne fait donc pas référence ici à une information transmise visuellement mais oralement. De manière générale ce sont les informations uniquement sensorielles qui sont à proscrire.

Un test simple consiste à faire une capture des éléments concernés et la passer en noir et blanc afin de vérifier que l’ensemble des informations reste compréhensible.

Proposer des alternatives

L’idée de ce critère d’accessibilité n’est pas d’interdire globalement l’utilisation de couleurs pour transmettre de l’information mais de permettre aux utilisateurs et utilisatrices d’accéder tout de même à l’information par d’autres moyens. Il faut donc donner des indications complémentaires aux internautes.

Si l’on reprend les exemples précédents, en proposant cette fois une alternative :

  • les liens hypertextes ont une couleur différente et sont soulignés

  • dans un formulaire, les champs comportant une erreur peuvent être signalés par une bordure rouge et un texte sous le champ informant sur l’erreur et comment la corriger

  • dans une graphique, chaque partie est colorée différemment et comporte une texture spécifique

  • dans une vidéo, proposer des sous-titres ou une transcription du contenu audio

La notice d’AcceDe Web, Assurer la compréhension de l’information même en l’absence de couleur(lien externe), donne plusieurs exemples à faire et de pas faire, pour mieux comprendre ce critère.