Si vous avez une bonne vue, vous pouvez partir du principe que tout le monde perçoit les couleurs ou la lisibilité du texte, de la même manière que vous. Bien sûr, ce n'est pas le cas. Comme vous pouvez l'imaginer, certaines combinaisons de couleurs que certaines personnes peuvent bien lire sont difficiles ou 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 plus différentes, le rapport de contraste est plus élevé.
Les consignes de WebAIM recommandent un rapport de contraste AA (minimum) de 4,5:1 pour tout le texte. Il existe des exceptions pour les textes très grands (120 à 150% plus grands que le corps du texte par défaut), pour lesquels le ratio peut être réduit à 3:1. Notez la différence au niveau des rapports de contraste indiqués ici:
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 constatée par les utilisateurs souffrant d'une perte de vision équivalente à une vision d'environ 20/40. 20/40 est souvent considéré comme l'acuité visuelle typique des personnes âgées d'environ 80 ans. Pour les utilisateurs malvoyants ou déficients en couleur, nous pouvons augmenter le contraste jusqu'à 7:1 pour le corps du texte.
Vous pouvez utiliser l'audit d'accessibilité de Lighthouse pour vérifier le contraste des couleurs. Pour générer le rapport:
- Ouvrez les outils de développement.
- Cliquez sur Audits.
- Sélectionnez Accessibilité.
Chrome inclut également une fonctionnalité expérimentale pour vous aider à détecter la totalité du texte à faible contraste sur votre page. Vous pouvez également utiliser des suggestions de couleurs accessibles pour corriger le faible contraste du texte.
Pour obtenir un rapport plus complet, installez l'extension Accessibility Insights. Ses rapports Fastpass incluent des informations sur tous les éléments qui ne respectent pas les contrôles de contraste des couleurs.
Algorithme avancé de contraste perceptuel (APCA)
L'algorithme avancé de contraste perceptuel (APCA) est une nouvelle façon de calculer le contraste basée sur des recherches modernes sur la perception des couleurs.
Par rapport aux consignes AA et 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 but prévu du texte)
Chrome inclut une fonctionnalité expérimentale pour remplacer les consignes de rapport de contraste AA/AAA par l'APCA.
Ne pas transmettre d’informations avec la couleur seule
Environ 320 millions de personnes dans le monde souffrent d'une déficience de la vision des couleurs. Environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. S'appuyer sur la couleur pour transmettre des informations pousse 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. Pour un utilisateur présentant un déficit de couleur ou un lecteur d'écran, cette information est mal transmise, voire pas du tout. Pour cette raison, vous devez toujours essayer de fournir à l'utilisateur plusieurs moyens d'accéder aux informations critiques.
La checklist de WebAIM indique dans la section 1.4.1 que "la couleur ne doit pas être la 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. Au lieu de cela, 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 l'association est active.
Une méthode de base pour corriger l'exemple précédent consiste à ajouter un message dans le champ, annonçant qu'il n'est pas valide et expliquant pourquoi.
Lorsque vous créez une application, gardez ce type de choses à l'esprit et faites attention aux zones dans lesquelles vous pourriez trop vous appuyer sur la couleur pour transmettre des informations importantes.
Si vous souhaitez savoir comment différentes personnes voient votre site ou si vous utilisez beaucoup de couleurs dans votre interface utilisateur, vous pouvez utiliser les outils de développement pour simuler différentes formes de déficience visuelle. Chrome inclut une fonctionnalité d'émulation des déficiences visuelles. Pour y accéder, ouvrez les outils de développement, puis ouvrez l'onglet Rendu dans le panneau. À partir de là, vous pouvez émuler les défauts 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 de mieux faire ressortir le texte. Pour les personnes malvoyantes, 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:
Des 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 sélectionnée. Si vous l'affichez avec une extension à contraste élevé, cette subtilité disparaît complètement, et le lecteur peut ainsi identifier la page active.
De même, dans l'exemple précédent, 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 respectez les rapports de contraste abordés précédemment, le mode Contraste élevé ne devrait pas vous poser de problème. Mais pour plus de tranquillité d'esprit, envisagez d'installer l'extension Chrome Contraste élevé et d'exécuter votre page une seule fois pour vérifier que tout fonctionne et que tout fonctionne comme prévu.