Utilisation des couleurs

Les couleurs ne sont pas perçues de la même manière par tout le monde. Il y a de nombreux facteurs qui peuvent influencer la perception des couleurs :

• Le daltonisme : Un homme sur huit est atteint de daltonisme. Les daltoniens ne distinguent pas bien certaines couleurs. Dans la forme la plus courante, la deutéranopie, ce sont le vert et le rouge, mais il y a d'autres formes de daltonisme qui affectent la perception d'autres couleurs.
• Les personnes aveugles ont uniquement accès aux informations textuelles et à la structure. Tout ce qui est transmis uniquement par la couleur est perdu.
• Les personnes malvoyantes doivent souvent fort agrandir le contenu et utilisent parfois des feuilles de style personnalisées qui modifient les couleurs.
• Les visiteurs de votre site peuvent avoir un écran mal calibré, ancien ou avoir des reflets dus au soleil.

Quand vous faites des choix de couleurs pour votre site, il faut penser à deux choses :

• Ne vous basez pas uniquement sur la couleur pour transmettre une information.
• Prévoyez des contrastes suffisants pour assurer une bonne lisibilité.

Comment faire ?

Si la couleur est utilisée pour communiquer une information, utilisez également un autre méthode pour communiquer cette information, par exemple un texte, un symbole ou une texture.

Imaginez que l'on imprime la page en nuances de gris. Il faut que l'on ait accès à la même information que lorsque l'on voit la page en couleurs.

Ci-dessous, vous trouverez quelques exemples d'utilisation de la couleur avec des alternatives accessibles.

Utilisation de vert et rouge pour indiquer un statut

Ci-dessous, vous voyez un morceau de la page web contenant l'ancien tableau des départs de l'aéroport de Bruxelles national. Les avions qui ont décollé sont indiqués en vert. Les vols retardés sont indiqués par un carré rouge.

Pour quelqu'un qui ne peut pas distinguer les couleurs, les carrés colorés ne sont d'aucune utilité. Le webmaster a adapté le tableau de la manière suivante :

Les carrés rouges et verts ont été remplacés par des rectangles de couleur auxquels sont superposés les textes ‘En vol’ ou ‘Retardé’.

Les captures d'écran ci-dessous donnent un autre bon exemple : une barre de progression rouge ou verte est utilisée pour indiquer la force d'un mot de passe, mais un texte accompagne la barre de progression pour indiquer si le mot de passe est faible (rouge) ou fort (vert)

Indication des liens par la couleur

Si l'on ne distingue les liens dans le corps de texte que par la couleur, comme dans l'exemple ci-dessous, ils ne sont pas bien visibles pour tout le monde.

Prévoyez une autre manière de distinguer les liens, par exemple le soulignement :

Indication des erreurs dans un formulaire

Pour indiquer qu'un formulaire contient des erreurs, il ne suffit pas de les indiquer en rouge. Identifiez les champs non valides également au moyen d'un texte et/ou d'un symbole.

Dans la capture d'écran ci-dessous, l'erreur dans le champ "Date de naissance" est indiquée par un bord rouge et un fond rose, mais aussi un symbole (point d'exclamation) et un message d'erreur :"Merci d'introduire une date de naissance valide. Vous devez avoir au moins 13 ans pour créer un compte".

Utilisation de couleurs dans un diagramme

Dans un diagramme la couleur est souvent utilisée pour différencier des séries de données. Il n'y a pas qu'une seule manière de compléter l'utilisation de la couleur dans un diagramme. L'utilisation de formes ou de hachures peuvent être une solution. Il est parfois possible de relier visuellement les étiquettes avec les portions de diagrammes correspondantes.