Rendez-vous accessibilité - Les couleurs

La perception des couleurs est particulière à chaque contexte et à chaque utilisateur. En effet, la perception de la couleur dépend de nombreux facteurs : la luminosité de l’écran, l’environnement d’utilisation ainsi que l’utilisateur lui-même. Lors de la conception mais aussi de la rédaction de contenu, il existe plusieurs recommandations simples pour assurer la compréhension et la lisibilité quels que soient le contexte et l’utilisateur.

Les différentes formes de malvoyance des couleurs

Il existe différentes formes de malvoyance: certains ne perçoivent pas le vert, d’autres le bleu et d’autres le rouge et pour chaque couleur à des degrés différents.

La plus connue est le daltonisme : 8% dans la population masculine et 0,5% dans la population féminine mondiale en sont atteints.

Il existe également une pathologie appelée achromatopsie, qui est transmise génétiquement ou suite à une lésion cérébrale. Cette pathologie se manifeste par l’absence totale de perception des couleurs. L’utilisateur voit alors en nuances de gris.

Enfin, il faut savoir qu’avec l’âge, les couleurs sont moins vives et la perception des contrastes diminue.

 

Perception complète des couleurs

 

Tritanopie (vision sans le bleu)

 

Deutéranopie (vision sans le vert)

Protanopie (vision sans le rouge)

Achromatopsie (Vision sans couleur)

 

 Une bonne utilisation de la couleur

L’utilisation des couleurs ne peut pas être l’unique manière de transmettre une information.

Elle doit être combinée avec une information textuelle ou une mise en forme afin que la compréhension de l’information soit la même pour tous.

 Perception complète des couleurs

Achromatopsie (Vision sans couleur)

 

Dans cette infographie provenant du site des élections, les portraits de chaque candidat sont mis en valeur par une couleur, cette couleur correspondant à leur parti politique.

Nous ne pouvons partir du principe que tous nos utilisateurs fassent le lien entre la couleur et le parti. C’est pourquoi le nom du parti est également écrit en clair sous le nom du candidat.

Cette recommandation est également valable pour des légendes de graphique ou de carte. Il est recommandé de fournir l’information en clair au niveau du graphique ou de l’image.

Si ces solutions ne sont pas réalisables sur une vue d’ensemble, l’information doit être disponible au clic sur les zones en questions.

Les contrastes

Même si les couleurs ne sont pas perçues, les contrastes forts seront visibles. Pour vous donner une idée du rendu et minimiser les erreurs dues aux couleurs, vous pouvez imprimer votre page en nuances de gris ou utiliser un plugin spécialisé à ajouter à votre navigateur (comme WCAG Contrast checker).

Prenons l’exemple des liens: pour permettre de les repérer, il est préférable de les mettre en valeur grâce à une couleur mais aussi un soulignement. Si le soulignement est retiré, il faudra alors veiller à augmenter le contraste avec le texte autour. Au survol, il est alors recommandé de faire apparaître le soulignement pour donner une confirmation à l’utilisateur.

Nous recommandons un contraste de 3,1 entre un lien et son texte alentour s’il n’est pas souligné.

La lisibilité

Exemple de contraste à 2.9

Pour assurer une lisibilité et permettre un confort de lecture suffisant, les contrastes doivent être suffisamment forts entre la couleur du texte et la couleur d’arrière-plan. Un contraste inférieur à 3:1, ne peut pas être considéré comme lisible.

Ces couleurs sont définies dans la charte graphique. En tant que rédacteur, vous n’aurez pas à vous en occuper. En tant que responsable de site, sachez que vos choix de couleurs peuvent avoir des conséquences sur le confort de lecture et l’accessibilité de votre site.

Pour qu’un texte soit agréable à lire sur écran, nous recommandons un contraste entre le texte et l’arrière-plan compris entre 7 :1 et 19 :1 entre le texte et l’arrière-plan. Pour tous les autres éléments dans la page (titre, menu, liens…), le contraste peut être plus faible.

Dernière mise à jour