Les couleurs

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

Protanopie (vision sans le rouge)

Tritanopie (vision sans le bleu)

Deutéranopie (vision sans le vert)

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é

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