Veiller à ce que les couleurs ne soient pas le seul moyen pour véhiculer de l'information

  • Accessibilité
  • Texte
  • Image
  • Vidéo

Source

Critère 3.1 - RGAA

Comprendre

  • Utilisateurs et utilisatrices principalement impactés : aveugles, déficients visuels.
  • Dans certains cas, l'absence à une information donnée par la couleur a pour conséquence une perte d'information (indication de la page active par exemple), mais bien généralement ce problème d’accessibilité rend les contenus ou les fonctionnalités inutilisables.
  • Dans le cas d’une fonctionnalité, par exemple une fonctionnalité de sélection multiple dans une liste d’objets, si le statut sélectionné est uniquement indiqué par une couleur, ces utilisateurs se retrouveront dans l’incapacité d’utiliser la fonctionnalité.
  • Dans le cas où l’information donnée par la couleur fait partie d’une image, comme un graphique par exemple, c’est l’accès à l’information lui-même qui devient impossible.

Consultez le guide des impacts sur les utilisateurs

Mise en œuvre

Que ce soit dans les textes ou dans les images (graphiques par exemple), il est important de ne pas se baser uniquement sur la couleur pour transmettre un message.

En complément de la couleur, vous pouvez ajouter un motif ou une forme pour avoir un moyen autre que la couleur pour transmettre le message.

AcceDe Web - 7.2 Veiller à ce que les couleurs ne soient pas le seul moyen pour véhiculer de l’information.

Exemples

Exemple 1 : le lien hypertexte est différencié du reste du texte du paragraphe par la couleur, le soulignement et par la graisse de la typographie

Exemple 2 : l’item actif de la pagination est différencié des autres items de paginations par la couleur et la taille de la forme (plus grande que les autres formes)

differenciation-hypertexte-exemple2

Exemple 3 : la légende du graphique associe texte, couleur et motif pour distinguer les différentes phases du projet