Avez-vous déjà essayé de lire du texte sur un écran et l'avez trouvé difficile à lire en raison du jeu de couleurs ou avez-vous eu du mal à voir l'écran dans un environnement très lumineux ou faiblement éclairé ? Ou peut-être avez-vous un problème de vision des couleurs plus permanent, comme 300 millions de personnes daltoniennes ou 253 millions de personnes malvoyantes ?
En tant que concepteur ou développeur, vous devez comprendre comment les gens perçoivent les couleurs et les contrastes, que ce soit de manière temporaire, en fonction de la situation ou de manière permanente. Cela vous aidera à mieux répondre à ses besoins visuels.
Ce module vous présentera quelques principes fondamentaux de l'accessibilité des couleurs et du contraste.
Perception des couleurs
Saviez-vous que les objets ne possèdent pas de couleur, mais qu'ils reflètent les longueurs d'onde de la lumière ? Lorsque vous voyez des couleurs, vos yeux reçoivent et traitent ces longueurs d'onde et les convertissent en couleurs.
En ce qui concerne l'accessibilité numérique, nous parlons de ces longueurs d'onde en termes de teinte, de saturation et de luminosité (HSL). Le modèle HSL a été créé comme alternative au modèle de couleurs RVB et s'aligne plus précisément sur la façon dont un humain perçoit la couleur.
La teinte est une manière qualitative de décrire une couleur, telle que le rouge, le vert ou le bleu, où chaque teinte a un point spécifique sur le spectre de couleurs avec des valeurs comprises entre 0 et 360, le rouge à 0, le vert à 120 et le bleu à 240.
La saturation est l'intensité d'une couleur, mesurée en pourcentages allant de 0 % à 100%. Une couleur avec une saturation complète (100%) serait très vive, tandis qu'une couleur sans saturation (0%) serait en nuances de gris ou en noir et blanc.
La luminosité est le caractère clair ou sombre d'une couleur, mesurée en pourcentages allant de 0% (noir) à 100% (blanc).
Mesurer le contraste des couleurs
Pour aider les personnes souffrant de divers handicaps visuels, le groupe WAI a créé une formule de contraste des couleurs pour s'assurer qu'un contraste suffisant existe entre le texte et son arrière-plan. Lorsque ces rapports de contraste des couleurs sont suivis, les personnes modérément malvoyantes peuvent lire le texte en arrière-plan sans avoir besoin d'une technologie d'assistance qui améliore le contraste.
Examinons des images dotées d'une palette de couleurs vives et comparons leur apparence à celles qui présentent des formes spécifiques de daltonisme.
Sur la gauche, l'image montre du sable arc-en-ciel avec les couleurs violette, rouge, orange, jaune, vert aqua, bleu clair et bleu foncé. Sur la droite se trouve un motif arc-en-ciel multicolore et plus lumineux.
Deutéranopie
La deutéranopie (communément appelée daltonisme) affecte 1 % à 5 % des hommes, et 0,35 à 0,1 % des femmes.
Les personnes atteintes de deutéranopie sont moins sensibles à la lumière verte. Ce filtre de daltonisme simule ce type de daltonisme.
Protanopie
La protanopie (communément appelée daltonisme) affecte 1,01% à 1,08% des hommes et 0,02% de 0,03% des femmes.
Les personnes atteintes de protanopie ont une sensibilité réduite à la lumière rouge. Ce filtre de daltonisme simule ce type de daltonisme.
Achromatopsie ou monochromatisme
L'achromatopsie ou le monochrome (ou daltonisme complet) n'apparaît que très, très rarement.
Les personnes souffrant d'achromatopsie ou de monochrome n'ont pratiquement aucune perception de la lumière rouge, verte ou bleue. Ce filtre de daltonisme simule ce à quoi pourrait ressembler ce type de daltonisme.
Calculer le contraste des couleurs
La formule du contraste des couleurs utilise la luminance relative des couleurs pour aider à déterminer le contraste, qui peut varier de 1 à 21. Cette formule est souvent abrégée en [color value]:1. Par exemple, le noir pur sur le blanc pur a le rapport de contraste des couleurs le plus élevé : 21:1.
(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors
Le texte de taille standard, y compris les images de texte, doit avoir un rapport de contraste des couleurs de 4.5:1 pour respecter les exigences minimales des WCAG concernant la couleur.
Le texte de grande taille et les icônes essentielles doivent présenter un rapport de contraste des couleurs de 3:1.
Les textes de grande taille sont caractérisés par une mise en gras d'au moins 18 pt / 24 pixels ou 14 pt/18,5 pixels. Les logos et les éléments décoratifs ne sont pas soumis à ces exigences de contraste des couleurs.
Heureusement, aucune opération mathématique avancée n'est requise, car de nombreux outils effectuent le calcul du contraste des couleurs à votre place. Des outils tels qu'Adobe Color, l'analyseur de contraste des couleurs, Leonardo et le sélecteur de couleur des outils pour les développeurs Chrome peuvent vous indiquer rapidement les rapports de contraste des couleurs et proposer des suggestions pour vous aider à créer les paires de couleurs et les palettes les plus inclusives.
Utiliser la couleur
En l'absence de niveaux de contraste des couleurs appropriés, les mots, les icônes et les autres éléments graphiques sont difficiles à découvrir, et la conception peut rapidement devenir inaccessible. Mais il est également important de prêter attention à la façon dont la couleur est utilisée à l'écran, car vous ne pouvez pas l'utiliser seule pour transmettre des informations ou des actions, ni distinguer un élément visuel.
Par exemple, si vous dites cliquez sur le bouton vert pour continuer, mais omettez tout contenu ou identifiant supplémentaire au bouton, il sera difficile pour les personnes atteintes de certains types de daltonisme de savoir sur quel bouton cliquer. De même, de nombreux graphiques, diagrammes et tableaux utilisent uniquement la couleur pour transmettre des informations. L'ajout d'un autre identifiant, comme un motif, du texte ou une icône, est essentiel pour aider les utilisateurs à comprendre le contenu.
L'examen de vos produits numériques en nuances de gris est un bon moyen de détecter rapidement les problèmes de couleur potentiels.
Requêtes média axées sur les couleurs
En plus de vérifier les rapports de contraste des couleurs et l'utilisation des couleurs à l'écran, vous devriez envisager d'appliquer les requêtes média de plus en plus populaires et compatibles, qui offrent aux utilisateurs plus de contrôle sur ce qui s'affiche à l'écran.
Par exemple, à l'aide de la requête média @prefers-color-scheme, vous pouvez créer un thème sombre, qui peut être utile aux personnes souffrant de photophobie ou de sensibilité à la lumière. Vous pouvez également créer un thème à contraste élevé avec @prefers-contrast, qui répond aux besoins des personnes présentant des déficiences de couleurs et une sensibilité au contraste.
Préfère le jeu de couleurs
La requête média @prefers-color-scheme permet aux utilisateurs de choisir une version claire ou sombre du site Web ou de l'application qu'ils consultent. Vous pouvez observer ce changement de thème en modifiant vos paramètres de préférence clair/sombre et en accédant à un navigateur compatible avec cette requête multimédia. Consultez les instructions pour Mac et Windows concernant le mode sombre.
Préfère le contraste
La requête média @prefers-contrast vérifie les paramètres de l'OS de l'utilisateur pour voir si le contraste élevé est activé ou désactivé. Pour voir ce changement de thème en action, modifiez vos paramètres de préférences de contraste et accédez à un navigateur compatible avec cette requête multimédia (paramètres du mode de contraste Mac et Windows).
Superposer des requêtes média
Vous pouvez utiliser plusieurs requêtes média axées sur les couleurs pour offrir encore plus de choix à vos utilisateurs. Dans cet exemple, nous avons empilé @prefers-color-scheme et @prefers-contrast.
Testez vos connaissances
Tester vos connaissances sur les couleurs et les contrastes
La couleur seule n'est pas suffisante pour identifier la documentation. Qu'est-ce qui aidera les lecteurs à identifier les éléments de l'interface utilisateur ?