Si vous avez une bonne vision, il est facile de supposer que tout le monde perçoit les couleurs ou la lisibilité du texte, de la même manière que vous, mais ce n'est évidemment pas le cas.
Comme vous pouvez l'imaginer, certaines combinaisons de couleurs faciles à lire sont difficiles, voire impossibles, pour d'autres. Cela est généralement dû au contraste des couleurs, c'est-à-dire à la relation entre la luminance des couleurs de premier plan et d'arrière-plan. Lorsque les couleurs sont similaires, le rapport de contraste est faible. Lorsqu'elles sont différentes, le rapport de contraste est élevé.
Les consignes de WebAIM recommandent un rapport de contraste AA (minimum) de 4,5:1 pour tout le texte. Une exception est faite pour les textes très grands (120 à 150% plus grands que le corps du texte par défaut), pour lesquels le ratio peut descendre à 3:1. Notez la différence entre les rapports de contraste indiqués ci-dessous.
Le rapport de contraste de 4,5:1 a été choisi pour le niveau AA, car il compense la perte de sensibilité au contraste généralement observée chez les utilisateurs souffrant d'une perte de vision équivalente à une vision d'environ 20/40. 20/40 est généralement considéré comme l'acuité visuelle typique des personnes âgées d'environ 80 ans. Pour les utilisateurs malvoyants ou présentant une déficience des couleurs, nous pouvons augmenter le contraste jusqu'à 7:1 pour le corps du texte.
Vous pouvez vérifier le contraste des couleurs à l'aide de l'audit d'accessibilité dans Lighthouse. Ouvrez les outils de développement, cliquez sur "Audits" et sélectionnez "Accessibilité" pour générer le rapport.
Chrome inclut également une fonctionnalité expérimentale pour vous aider à détecter tous les textes à faible contraste de votre page. Vous pouvez également utiliser la suggestion de couleur accessible pour corriger le texte à faible contraste.
Pour obtenir un rapport plus complet, installez l'extension Accessibility Insights. Le contraste des couleurs est l'une des vérifications du rapport Fastpass. Vous obtiendrez un rapport détaillé de tous les éléments défaillants.
Algorithme avancé de contraste perceptuel (APCA)
L'algorithme Advanced Perceptual Contrast Algorithm (APCA) est une nouvelle méthode de calcul du contraste basée sur des recherches modernes sur la perception des couleurs.
Par rapport aux directives AA/AAA, l'APCA dépend davantage du contexte.
Le contraste est calculé en fonction des caractéristiques suivantes:
- Propriétés spatiales (épaisseur de la police et taille du texte)
- Couleur du texte (différence de luminosité perçue entre le texte et l'arrière-plan)
- Contexte (lumière ambiante, environnement et objectif du texte)
Chrome inclut une fonctionnalité expérimentale pour remplacer les consignes de rapport de contraste AA/AAA par l'APCA.
Ne transmettez pas d'informations en utilisant uniquement la couleur
Environ 320 millions de personnes dans le monde souffrent de déficience de la vision des couleurs. Environ 1 homme sur 12 et 1 femme sur 200 souffrent de daltonisme. Cela signifie qu'environ 1/20, soit 5%, des internautes n'utiliseront pas votre site comme prévu. Lorsque nous utilisons la couleur pour transmettre des informations, nous poussons ce nombre à des niveaux inacceptables.
Par exemple, dans un formulaire de saisie, un numéro de téléphone peut être souligné en rouge pour indiquer qu'il n'est pas valide. Mais pour un utilisateur de manque de couleurs ou de lecteur d'écran, cette information n'est pas bien transmise, voire pas du tout. Vous devez donc toujours essayer de fournir à l'utilisateur plusieurs moyens d'accéder aux informations critiques.
La checklist de WebAIM stipule dans la section 1.4.1 que "la couleur ne doit pas être utilisée comme seule méthode pour transmettre du contenu ou distinguer des éléments visuels".
Il note également que "la couleur seule ne doit pas être utilisée pour distinguer les liens du texte environnant", sauf s'ils répondent à certaines exigences de contraste.
À la place, la checklist recommande d'ajouter un indicateur supplémentaire, tel qu'un trait de soulignement (à l'aide de la propriété CSS text-decoration) pour indiquer quand le lien est actif.
Un moyen simple de corriger l'exemple précédent consiste à ajouter un message supplémentaire dans le champ, annonçant qu'il n'est pas valide et pourquoi.
Lorsque vous créez une application, gardez ce type de choses à l'esprit et faites attention aux zones dans lesquelles vous utilisez peut-être trop de couleurs pour transmettre des informations importantes.
Si vous souhaitez voir à quoi ressemble votre site selon les utilisateurs ou si vous utilisez beaucoup l'utilisation des couleurs dans votre interface utilisateur, vous pouvez utiliser les outils de développement pour simuler différentes formes de déficience visuelle, y compris différents types de daltonisme. Chrome inclut une fonctionnalité d'émulation des déficiences visuelles. Pour y accéder, ouvrez DevTools, puis ouvrez l'onglet Rendering (Rendu) dans le panneau. Vous pouvez ensuite émuler les déficits de couleur suivants.
- Protanopie: incapacité à percevoir la lumière rouge.
- Deutéranopie: incapacité à percevoir la lumière verte.
- Tritanopie: incapacité à percevoir la lumière bleue.
- Achromatopsie: incapacité à percevoir n'importe quelle couleur à l'exception des nuances de gris (très rare).
Mode Contraste élevé
Le mode Contraste élevé permet à l'utilisateur d'inverser les couleurs de premier plan et d'arrière-plan, ce qui permet souvent au texte de mieux ressortir. Pour une personne souffrant d'une déficience visuelle, le mode Contraste élevé peut grandement faciliter la navigation dans le contenu de la page. Il existe plusieurs façons d'obtenir une configuration à contraste élevé sur votre machine.
Les systèmes d'exploitation tels que Mac OSX et Windows offrent des modes de contraste élevé qui peuvent être activés pour tout au niveau du système.
Un exercice utile consiste à activer les paramètres de contraste élevé et à vérifier que toute l'interface utilisateur de votre application est toujours visible et utilisable.
Par exemple, une barre de navigation peut utiliser une couleur d'arrière-plan subtile pour indiquer la page actuellement sélectionnée. Si vous l'affichez avec une extension à contraste élevé, cette subtilité disparaît complètement, et avec elle permet au lecteur de comprendre quelle page est active.
De même, si vous prenez l'exemple de la leçon précédente, le soulignement rouge du champ du numéro de téléphone non valide peut s'afficher dans une couleur bleu-vert difficile à distinguer.
Si vous atteignez les rapports de contraste décrits précédemment, vous devriez pouvoir accepter le mode contraste élevé. Pour encore plus de tranquillité d'esprit, nous vous conseillons d'installer l'extension Chrome Contraste élevé et de vérifier que votre page fonctionne comme prévu et que tout fonctionne comme prévu.