Il est toujours difficile de savoir si un design (les choix graphiques d’un site ou d’une application) est accessible : il y a des règles bien précises à respecter, mais une fois que celles-ci le sont, tout est affaire de nuance et de contexte.
Attention, on parle bien de nuance et de contexte, pas d’interprétation. L’accessibilité, en son coeur, n’est pas arbitraire. On trouvera toujours des cas particuliers où il n’y a pas de meilleure décision, mais ce ne sont que des cas particuliers.
Avant de rentrer dans le détails de l’utilisation des couleurs dans un design web, une petite introduction sur ce qu’est un design accessible.
C’est quoi un design accessible ?
C’est un design qui est compatible avec les personnes qui l’utilisent. Pour rentrer un peu dans le détail, voici quelques exemples :
- Une personne qui ne connait pas très bien la langue et qui traduit votre message, votre site ou votre application. Dans ce cas, les instructions en un mot comme « Ajouter », « Changer », « Déplacer » pourront être traduites étrangement. Les phrases plus longues pourront prendre davantage ou moins de place selon la langue cible.
- Un usager qui doit utiliser son téléphone ou sa liseuse pour accéder à votre contenu. Il y a de grandes chances que la personne se rende compte très rapidement s’il est incompatible avec ce terminal. Si elle s’en va, ce n’est vraiment frustrant pour personne. Le problème est quand la personne est obligée temporairement de se servir de cet équipement pour faire sa démarche et qu’elle ne peut pas utiliser un autre outil ou site que le vôtre.
- Une personne doit interagir avec votre site ou application à une heure précise de la journée où la luminosité est trop forte, ou avec un écran déréglé, ou fissuré, ou au travers d’un vidéoprojecteur. Il y a une différence entre un moment désagréable auquel vous ne pouvez rien, et un outil inaccessible qui n’est utilisable que dans des conditions parfaites.
- Un usager utilise un vieil ordinateur (ou téléphone mobile, ou tablette, ou une connexion internet instable) qui met beaucoup de temps pour afficher votre contenu. Ce n’est pas de votre faute, mais ce n’est pas de la sienne non plus. Si toute action met un temps inhabituel à se réaliser, les usagers vont se détourner de votre contenu.
- Une personne doit utiliser votre site avec un enfant en bas âge dans les bras. Fonctionne aussi avec la version « enfant en bas âge sachant se déplacer à quatre pattes ». Comprenez que l’attention sur votre produit ne sera pas sans faille.
Il est important d’envisager que tout le monde n’a pas les conditions parfaites pour interagir avec votre contenu. Ce n’est pas qu’une histoire de handicap de naissance dû à une maladie ou survenu au cours de la vie avec une amputation violente : la plupart des inaccessibilités sont ressenties par tout un chacun, à différents moments de la journée ou de la vie. Créer un contenu web appréciable, c’est le penser fonctionnel même quand tout ne va pas dans le meilleur des mondes. Pour illustrer via un autre domaine, un véhicule ne roulant que sur des voies planes et sans nids-de-poule n’aurait que peu de succès.
L’accessibilité des couleurs : penser son design avec des couleurs adaptées
Le RGAA (Référentiel Général pour l’Amélioration de l’Accessibilité) présente quelques règles précises à ce sujet. Mais comme il y a beaucoup de critères, on va découper en sous-sections.
Vous retrouverez dans cet article la gestion des couleurs : les articles suivants traiteront d’autres aspects de design et de typographie.
Tout le monde ne perçoit pas la couleur de la même manière. Comme beaucoup le savent, il existe des handicaps associés à une condition dès la naissance (ou non) comme le daltonisme. Ce qui est moins évident, c’est que la couleur ne doit pas être utilisée comme seul indicateur : voici pourquoi.
La perception de la couleur dépend du contexte environnant
Vous avez peut-être remarqué qu’un écran, de smartphone par exemple, paraît bien plus lumineux en pleine nuit qu’en pleine journée. La lumière environnante réduit le contraste des couleurs perçues, et c’est pour cela qu’un écran en plein soleil est difficile à lire.
Cette interprétation des couleurs est déterminée par notre cerveau. C’est ce qui nous permet de bien mieux déceler des détails dans la pénombre : un brin de lumière dans un nuancier de gris nous paraît bien plus lumineux qu’il ne l’est en réalité. Ci-dessous, un graphique présentant une courbe « Luminosité perçue » face à une droite « Luminosité réelle » : même en augmentant de manière uniforme la luminosité du noir jusqu’au blanc, la luminosité perçue est bien plus élevée au début de la courbe, et rejoint la droite vers le blanc.
Cette considération est importante : cet effet se manifeste à la fois dans l’environnement de l’usager et dans les thèmes sombres.
La perception de la couleur dépend du calibrage de l’écran
Vous l’avez peut-être remarqué : d’un écran à l’autre, les couleurs affichées ne sont pas les mêmes. Vous pouvez faire le test sur un téléphone, un ordinateur portable, une télévision et/ou un vidéoprojecteur : l’affichage sera différent, de manière plus ou moins perceptible.
Et c’est sans compter :
- L’usure du matériel : une lampe usée dans un vidéoprojecteur rendra des couleurs surprenantes.
- Les autres médias : imprimer une page web ou un contenu coloré, selon de nombreux facteurs, pourra donner des résultats médiocres.
Un exemple de différences de calibrage sur le site Ps pour Photographes (lien vers l’article). Sur deux écrans libellés « Avant calibrage », on voit :
- D’un côté des couleurs plutôt pastel dû à une luminosité trop importante.
- De l’autre, des tons bleutés au lieu de rosés, comme s’il y avait un filtre bleu sur la totalité de la photo. Les couleurs claires sont presque complètement blanches.
Après calibrage, les deux écrans ont le même rendu, une montagne à l’aube.
Toutes les personnes valides ne perçoivent pas les couleurs de la même manière
Même sans daltonisme, les couleurs sont interprétées différemment. Peut-être avez-vous déjà vécu une expérience similaire : en échangeant avec quelqu’un, vous indiquez le panneau « jaune », et votre interlocuteur répond qu’il n’est pas jaune mais orange. Ou entre le bleu et le vert. Ou entre le bleu et le violet.
En réalité, la couleur n’est qu’une interprétation de notre cerveau par rapport à des stimuli lumineux fournis par les yeux. C’est une longue chaîne qui peut fonctionner différemment selon les personnes.
Par exemple, vous pourriez réaliser le test Is My Blue avec une autre personne, sur le même écran. Le principe : le site vous présente une couleur, vous décidez si c’est « plutôt vert » ou « plutôt bleu » en huit étapes. L’écart se réduit de plus en plus pour déterminer votre interprétation de la couleur bleue. Les écarts peuvent être surprenants.
Un autre exemple, la fameuse robe (voir l’article The Dress sur Wikipedia). Si vous ne la connaissez pas, le test est impressionnant. Quel que soit l’écran, et selon votre perception des couleurs, vous verrez la robe ci-dessous :
- Noire et bleue
- Blanche et dorée
- Potentiellement un mélange des deux, ou avec du brun.
Le daltonisme est un handicap invisible mais bien présent
Le daltonisme impacte environ 3.3 millions de personnes en France, avec une prévalence forte pour les hommes : 1 homme sur 12, 1 femme sur 2001. Ce chiffre est stable depuis le début des études à ce sujet, étant dû principalement à des anomalies génétiques ou des accidents de la vie.
Il existe différents daltonismes, aussi appelés dyschromatopsies (dys réfère à un dysfonctionnement, chromato à la couleur, opsie à la vision) :
- Protanopie : absence des récepteurs rétinaux du rouge
- Protanomalie : présence d’une mutation du pigment de la vision du rouge
- Deutéranopie : absence des récepteurs rétinaux du vert
- Deutéranomalie : présence d’une mutation du pigment de la vision du vert
- Tritanopie : absence des récepteurs rétinaux du bleu
- Tritanomalie : présence d’une mutation du pigment de la vision du bleu
- Achromatopsie : absence totale de vision des couleurs, associée dans sa forme congénitale à une forte photophobie, une acuité visuelle réduite (< 2/10)
Données de l’image
| Pourcentage de la population | Type de vision |
|---|---|
| 92 % | Vision majoritaire |
| 2,7 % | Deutéranomalie |
| 0,66 % | Protanomalie |
| 0,59 % | Protanopie |
| 0,56 % | Deutéranopie |
| 0,015 % % | Tritanopie |
| 0,01 % % | Tritanomalie |
| < 0,0001 % % | Achromatopsie |
Pour se représenter les différences de couleurs et donc de contraste entre les différentes formes de daltonisme, voici des exemples tirés de la page Wikipedia sur le daltonisme :
Si vous n’êtes pas aveugle et n’avez pas de daltonisme, vous pourrez remarquer que les contrastes pour les personnes ayant une protanopie sont particulièrement réduits sur les sept couleurs de l’arc-en-ciel : le orange, le jaune et le vert sont toutes des nuances de jaune, tandis que le bleu et le violet sont en nuances de bleu.
La signification des couleurs n’est pas la même pour tout le monde
Une thématique connue dans le design est celle de la psychologie des couleurs : les couleurs ont une signification, qui permet de transmettre des émotions. On trouvera assez fréquemment les exemples suivants :
- Rouge : le danger
- Vert : le succès
- Jaune : le dynamisme
- Bleu : le sérieux
- Et ainsi de suite
Ce qui est moins fréquemment évoqué, c’est que c’est notre culture qui associe une signification aux couleurs. À force de voir des feux tricolores, on finit par associer le rouge à l’arrêt et le vert au mouvement. À force de voir des habits noirs ou blancs pendant les cérémonies, on les associe au sérieux et à la sobriété.
Ce qui signifie que dans d’autres cultures, les couleurs ont un autre sens : PageOneFormula a rédigé un article avec différents exemples dans différentes cultures.
Un autre exemple : sur les marchés boursiers chinois, le rouge indique une hausse, alors que le vert indique une baisse, à l’inverse de l’Europe et des États-Unis2.
Indiquer un échec uniquement avec du rouge et un succès avec du vert ajoute une charge supplémentaire pour les personnes venant d’autres cultures. Selon leur degré d’acclimatation à la culture occidentale, cela peut même créer des incompréhensions.
Conclusion, et comment utiliser les couleurs de manière accessible
En définitive, ces éléments influent sur la compréhension d’une couleur :
- Si c’est un écran ou une impression ou autre chose
- L’environnement autour de l’écran
- Le calibrage de l’écran
- La culture
- La perception des couleurs, reconnue ou non
Et encore, nous n’avons pas mentionné le fait que la perception des couleurs est réalisée dans notre tête : certaines personnes peuvent voir les couleurs différemment tout simplement parce que leur cerveau fonctionne différemment.
Il y a une erreur à ne surtout pas commettre : faire vous-même des thèmes spécifiques à chaque handicap, pour correspondre à tous les besoins. C’est un temps de développement gigantesque et qui ne fonctionnera pas : qu’importe le travail réalisé, vous ne pourrez pas influer sur l’environnement autour de l’écran par exemple.
La solution, c’est tout simplement d’avoir une gestion raisonnée et qualifiée des couleurs. Cela inclut :
- Un contraste suffisant entre la couleur des textes et la couleur du fond
- Un contraste suffisant entre la couleur des liens, la couleur des textes environnants et la couleur de fond (voir l’outil Contrast Triangle)
- Un contraste suffisant pour les éléments interactifs : un bouton doit « se voir », un champ de formulaire également.
- Un contraste insuffisant entre les boutons désactivés et le texte : sinon, on peut avoir l’impression que ces boutons sont actifs. Ce n’est pas un critère du RGAA directement car les boutons désactivés sont exemptés du contrôle de contraste, c’est une bonne pratique de design.
- Un contraste suffisant pour les placeholders. Encore mieux et pour éviter de considérer le placeholder comme un texte déjà entré, ne pas utiliser de placeholder du tout.
- Ne pas baser uniquement le propos sur la couleur
- Ne pas s’inquiéter des éléments uniquement décoratifs : ils ne véhiculent aucun sens fonctionnel
Et c’est exactement ce que propose le RGAA. Voici les critères RGAA associés à la couleur :
- L’information ne doit pas être donnée uniquement par la couleur (Critère 3.1)
- Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ? (Critère 3.2)
- Les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées (hors cas particuliers) ? (Critère 3.3)
Ces critères précisent :
- Que si la couleur véhicule un sens, un autre élément doit indiquer le sens. On peut penser à la forme (un carré rouge, un rond vert, un triangle jaune), à un texte intégré dans la forme, à un numéro ou une lettre qui est ensuite référencée dans une légende…
- Que le contraste doit être de 3:1 pour un grand texte (24px et plus, ou 18.5px en gras) et de 4.5:1 pour le reste des textes. Vous pouvez tester les contrastes avec cet outil fourni par WebAIM.
- Que dans un graphique où la couleur véhicule un sens, le sens doit toujours être perçu soit avec un contraste de 3:1, soit sans couleurs. On peut utiliser des libellés proches des aplats de couleur, ou des textures, ou s’assurer que les couleurs contiguës sont alternées avec des contrastes suffisants.
- Que les éléments interactifs (liens, boutons, champs de formulaires) ont bien un contraste de 3:1 ou un élément distinctif qui n’est pas basé sur la couleur : un soulignement, une bordure, un liseré, …
Les rapports de contraste (3:1 et 4.5:1) tombent juste parce qu’ils sont des conventions. Il fallait bien trancher quelque part : malgré ces rapports de contraste, des personnes n’arriveront pas à interpréter l’information. Pour ne donner qu’un exemple de polyhandicap, les personnes daltoniennes ont aussi le soleil sur leur écran.
Sachant cela, la meilleure chose que vous puissiez faire, c’est de viser ces rapports de contraste, même si vous ne pouvez pas tout corriger d’un coup. De toute façon, il y a tellement de manières différentes de comprendre une couleur qu’elle n’est pas si importante que ça.
Suite de la série
Dans l’article suivant, nous continuerons de détailler les éléments essentiels dans la création d’interfaces graphiques accessibles, en nous concentrant cette fois sur la mise en page.
