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.
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. Ces principes sont applicables également dans la réalisation d'illustration mais aussi lors de la création de documents PDF.
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).
Les WCAG définissent d'ailleurs des règles strictes: selon la taille de police ou l'élément d'affichage, il doit être au minimum de 3:1. Pour les plus petits textes un minimum de 4,5:1 est requis.
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.
Un contraste de 3,1 entre un lien et son texte alentour s’il n’est pas souligné, est demandé.
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 permettra pas une bonne lisibilité.
Ces couleurs sont définies dans la charte graphique. En tant que rédacteur, vous n’aurez pas à vous en occuper sauf dans vos illustrations. 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 modification le