Couleur et contraste

Avez-vous déjà essayé de lire du texte sur un écran et trouvé cela difficile en raison du jeu de couleurs, ou eu du mal à voir l'écran dans un environnement très lumineux ou peu éclairé ? Ou peut-être souffrez-vous d'un trouble de la vision des couleurs plus permanent, comme les 300 millions de personnes atteintes de daltonisme ou les 253 millions de personnes malvoyantes ?

En tant que concepteur ou développeur, vous devez comprendre comment les utilisateurs perçoivent les couleurs et les contrastes, qu'ils soient temporaires, situationnels ou permanents. Cela vous aidera à mieux répondre à leurs besoins visuels.

Ce module vous présentera quelques principes fondamentaux concernant les couleurs et le contraste accessibles.

Percevoir les couleurs

Saviez-vous que les objets n'ont pas de couleur, mais qu'ils réfléchissent des longueurs d'onde de lumière ? Lorsque vous voyez une couleur, vos yeux reçoivent et traitent ces longueurs d'onde, puis les convertissent en couleurs.

En matière d'accessibilité numérique, nous parlons de ces longueurs d'onde en termes de teinte, de saturation et de luminosité (HSL). Le modèle TSL a été créé comme alternative au modèle de couleur RVB et correspond davantage à la façon dont un humain perçoit les couleurs.

La teinte est une façon qualitative de décrire une couleur, comme le rouge, le vert ou le bleu. Chaque teinte a une place spécifique sur le spectre de couleurs, avec des valeurs allant de 0 à 360 (le rouge à 0, le vert à 120 et le bleu à 240).

La saturation correspond à l'intensité d'une couleur, mesurée en pourcentage (de 0 % à 100 %). Une couleur avec une saturation totale (100 %) est très vive, tandis qu'une couleur sans saturation (0 %) est en niveaux de gris ou en noir et blanc.

La luminosité est le caractère clair ou foncé d'une couleur, mesuré en pourcentage allant de 0 % (noir) à 100 % (blanc).

Mesurer le contraste des couleurs

Pour aider les personnes souffrant de différents handicaps visuels, le groupe WAI a créé une formule de contraste des couleurs afin de s'assurer qu'il existe un contraste suffisant entre le texte et son arrière-plan. Lorsque ces rapports de contraste des couleurs sont respectés, les personnes ayant une vision modérément basse peuvent lire le texte sur l'arrière-plan sans avoir besoin de technologies d'assistance améliorant le contraste.

Examinez des images avec une palette de couleurs vives et comparez leur apparence pour les personnes atteintes de formes spécifiques de daltonisme.

À gauche, l'image montre du sable arc-en-ciel avec des couleurs violettes, rouges, orange, jaunes, vert turquoise, bleu clair et bleu foncé. À droite se trouve un motif arc-en-ciel multicolore plus lumineux.

Deutéranopie

La deutéranopie (communément appelée daltonisme vert) touche 1 à 5 % des hommes et 0,1 à 0,35 % des femmes.

Les personnes atteintes de deutéranopie ont une sensibilité réduite à la lumière verte. Ce filtre simule ce à quoi ce type de daltonisme peut ressembler.

Protanopie

La protanopie (communément appelée daltonisme rouge) touche 1,01 % à 1,08 % des hommes et 0,02 % à 0,03 % des femmes.

Les personnes atteintes de protanopie ont une sensibilité réduite à la lumière rouge. Ce filtre simule ce à quoi ce type de daltonisme peut ressembler.

Achromatopsie ou monochromatisme

L'achromatopsie ou le monochromatisme (ou daltonisme complet) sont très, très rares.

Les personnes atteintes d'achromatopsie ou de monochromatisme n'ont presque aucune perception de la lumière rouge, verte ou bleue. Ce filtre simule ce à quoi ce type de daltonisme peut ressembler.

Calculer le contraste des couleurs

La formule de contraste des couleurs utilise la luminance relative des couleurs pour 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 un fond blanc pur présente le rapport de contraste des couleurs le plus élevé, soit 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

Pour respecter les exigences minimales des WCAG concernant les couleurs, le texte de taille normale, y compris les images de texte, doit présenter un rapport de contraste des couleurs de 4.5:1. Le rapport de contraste des couleurs du texte de grande taille et des icônes essentielles doit être de 3:1. Un texte de grande taille est un texte d'au moins 18 pt / 24 px ou 14 pt/18,5 px en gras. Les logos et les éléments décoratifs ne sont pas soumis à ces exigences de contraste des couleurs.

Heureusement, aucun calcul mathématique avancé n'est requis, car de nombreux outils effectuent les calculs de contraste des couleurs pour vous. Des outils tels que Adobe Color, Color Contrast Analyzer, Leonardo et le sélecteur de couleurs des outils de développement Chrome peuvent vous indiquer rapidement les rapports de contraste des couleurs et vous proposer des suggestions pour vous aider à créer les paires et les palettes de couleurs les plus inclusives.

Utiliser les couleurs

Sans un bon niveau de contraste des couleurs, les mots, les icônes et les autres éléments graphiques sont difficiles à découvrir et le design peut rapidement devenir inaccessible. Toutefois, il est également important de prêter attention à la manière dont la couleur est utilisée à l'écran, car vous ne pouvez pas utiliser la couleur seule pour transmettre des informations, des actions ou distinguer un élément visuel.

Par exemple, si vous dites cliquez sur le bouton vert pour continuer, mais que vous omettez tout contenu ou identifiant supplémentaire pour le 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, tableaux et diagrammes utilisent uniquement la couleur pour transmettre des informations. Il est essentiel d'ajouter un autre identifiant, comme un motif, du texte ou une icône, pour aider les utilisateurs à comprendre le contenu.

Examiner vos produits numériques en niveaux de gris est un bon moyen de détecter rapidement les problèmes de couleur potentiels.

Requêtes média axées sur la couleur

En plus de vérifier les rapports de contraste des couleurs et l'utilisation des couleurs sur votre écran, vous devriez envisager d'appliquer les requêtes média de plus en plus populaires et prises en charge, qui offrent aux utilisateurs plus de contrôle sur ce qui est affiché à l'écran.

Par exemple, à l'aide de la requête média @prefers-color-scheme, vous pouvez créer un thème sombre, ce 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 est compatible avec les personnes souffrant de déficience de la vision des couleurs et de sensibilité au contraste.

Schéma de couleurs préféré

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. Pour voir ce changement de thème en action, modifiez vos préférences pour le thème clair ou sombre, puis accédez à un navigateur compatible avec cette requête média. Consultez les instructions pour le mode sombre sur Mac et Windows.

Comparez le mode clair et 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é. Vous pouvez voir ce changement de thème en action en modifiant vos paramètres de préférence de contraste et en accédant à un navigateur qui prend en charge cette requête média (paramètres du mode contraste Mac et Windows).

Comparer le contraste normal et élevé

Requêtes média de calque

Vous pouvez utiliser plusieurs requêtes média axées sur la couleur pour offrir encore plus de choix à vos utilisateurs. Dans cet exemple, nous avons empilé @prefers-color-scheme et @prefers-contrast.

Comparez la couleur et le contraste.