Couleur et contraste

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 faible luminosité ? Ou peut-être souffrez-vous d'un problème de vision des couleurs plus permanent, comme les 300 millions de personnes daltoniennes ou les 253 millions de personnes malvoyantes ?

En tant que concepteur ou développeur, vous devez comprendre comment les utilisateurs perçoivent la couleur et le contraste, que ce soit de manière temporaire, ponctuelle ou permanente. Cela vous aide à mieux répondre à leurs besoins visuels.

Ce module présente quelques principes de base accessibles concernant la couleur et le contraste.

Saviez-vous que les objets ne possèdent pas de couleur, mais qu'ils reflètent des longueurs d'ondes lumineuses ? Lorsque vous voyez de la couleur, vos yeux reçoivent et traitent ces longueurs d'onde, puis les convertissent en couleurs.

Œil qui consulte la roue chromatique.

Dans le domaine de l'accessibilité numérique, nous parlons de ces longueurs d'onde en termes de teinte, de saturation et de luminosité. Le modèle HSL a été créé comme alternative au modèle de couleur RVB et correspond plus précisément à la façon dont un humain perçoit la couleur.

La teinte est un moyen qualitatif de décrire une couleur, comme le rouge, le vert ou le bleu, où chaque teinte a une place spécifique sur le spectre des couleurs, avec des valeurs allant de 0 à 360, le rouge étant à 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 à saturation maximale (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 sombre d'une couleur, mesuré en pourcentages allant de 0 % (noir) à 100 % (blanc).

Mesurer le contraste des couleurs

Pour aider les personnes souffrant de divers troubles visuels, le groupe WAI a créé une formule de contraste des couleurs afin de s'assurer qu'un contraste suffisant existe 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 faible peuvent lire le texte sur l'arrière-plan sans avoir besoin d'une technologie d'assistance améliorant le contraste.

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

Sable arc-en-ciel d'origine.
Photo d'Alexander Grey sur Unsplash.
Modèle arc-en-ciel d'origine.
Photo de Clark Van Der Beken sur Unsplash.

Sur la gauche, l'image montre du sable arc-en-ciel avec des couleurs violet, rouge, orange, jaune, vert aqua, bleu clair et bleu foncé. À droite se trouve un motif arc-en-ciel plus lumineux et multicolore.

Deutéranopie

Sable arc-en-ciel, tel que vu par une personne atteinte de deuteranopie.
Motif arc-en-ciel, tel que vu par une personne atteinte de deuteranopie.

La deutéranopie (communément appelée "cécité verte") touche 1 % à 5 % des hommes et 0,35 % à 0,1 % des femmes.

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

Protanopie

Sable arc-en-ciel, vu par une personne atteinte de protanopie.
Modèle arc-en-ciel, tel que vu par une personne atteinte de protanopie.

La protanopie (également appelée "cécité 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 de daltonisme simule ce type de daltonisme.

Achromatopsie ou monochromatisme

Sable arc-en-ciel, vu par une personne atteinte d'achromatopsie.
Motif arc-en-ciel, vu par une personne atteinte d'achromatopsie.

L'achromatopsie ou monochromatisme (ou cécité totale des couleurs) est très, très rare.

Les personnes atteintes d'achromatopsie ou de monochromatisme ne perçoivent presque pas la lumière rouge, verte ou bleue. Ce filtre de daltonisme simule ce type de daltonisme.

Calculer le contraste des couleurs

La formule de contraste des couleurs utilise la luminance relative des couleurs pour déterminer le contraste, qui peut aller de 1 à 21. Cette formule est souvent abrégée en [color value]:1. Par exemple, le noir pur sur du blanc pur offre le plus grand rapport de contraste des couleurs, à savoir 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 normale, y compris les images de texte, doit avoir un rapport de contraste des couleurs de 4.5:1 pour respecter les exigences minimales WCAG concernant la couleur. Le texte de grande taille et les icônes essentielles doivent avoir un rapport de contraste des couleurs de 3:1. Le texte de grande taille est caractérisé par une taille d'au moins 18 points/24 pixels ou 14 points/18,5 pixels en gras. Les logos et les éléments décoratifs ne sont pas concernés par ces exigences de contraste des couleurs.

Heureusement, aucune formule mathématique avancée n'est requise, car de nombreux outils effectuent les calculs de contraste des couleurs à votre place. Des outils tels que Adobe Color, Color Contrast Analyzer, Leonardo et le sélecteur de couleurs des outils pour les développeurs de Chrome peuvent vous indiquer rapidement les rapports de contraste des couleurs et vous suggérer des combinaisons et des palettes de couleurs les plus inclusives possible.

Utiliser la couleur

Sans un bon niveau de contraste des couleurs, les mots, les icônes et les autres éléments graphiques sont difficiles à repérer, et la conception peut rapidement devenir inaccessible. Il est toutefois é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 sur le bouton, il sera difficile pour les personnes souffrant de certains types de daltonisme de savoir sur quel bouton cliquer. De même, de nombreux graphiques, diagrammes et tableaux n'utilisent que la couleur pour transmettre des informations. L'ajout d'un autre identifiant, tel qu'un motif, du texte ou une icône, est essentiel pour aider les utilisateurs à comprendre le contenu.

Examiner 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 avec mise en couleur

Au-delà de la vérification du rapport de contraste des couleurs et de l'utilisation des couleurs à l'écran, envisagez 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 multimé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 est adapté aux personnes souffrant de déficiences visuelles et de sensibilité au contraste.

Préfère un jeu de couleurs

Navigateurs pris en charge

  • Chrome : 76.
  • Edge : 79.
  • Firefox : 67.
  • Safari : 12.1.

Source

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 paramètres de préférence pour le thème clair ou sombre, puis accédez à un navigateur compatible avec cette requête multimédia. Consultez les instructions pour Mac et Windows pour utiliser le mode sombre.

Paramètres généraux macOS pour l'apparence.

Préfère le contraste

Navigateurs pris en charge

  • Chrome : 96.
  • Edge: 96
  • Firefox : 101.
  • Safari: 14.1.

Source

La requête multimédia @prefers-contrast vérifie les paramètres de l'OS de l'utilisateur pour voir si le mode Haute intensité est activé ou désactivé. Vous pouvez voir ce changement de thème en modifiant vos paramètres de préférence de contraste et en accédant à un navigateur compatible avec cette requête multimédia (paramètres du mode de contraste Mac et Windows).

Exemple de code en mode clair sans préférence de contraste
Mode clair, aucune préférence de contraste
Exemple de code en mode sombre avec préférence de contraste élevé.
Mode sombre, préférence de contraste élevé.

Requêtes multimédias en couches

Vous pouvez utiliser plusieurs requêtes multimédias 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.

Mode clair, contraste normal.
Mode clair, aucune préférence de contraste.
Mode sombre, contraste normal.
Mode sombre, aucune préférence de contraste.
Mode clair, contraste élevé.
Mode clair, préférence de contraste élevé
Mode sombre, contraste élevé
Mode sombre, préférence de contraste élevé.

Testez vos connaissances

Tester vos connaissances sur les couleurs et le contraste

La couleur seule n'est pas un identifiant suffisant pour la documentation. Qu'est-ce d'autre qui aidera les lecteurs à identifier les éléments de l'interface utilisateur ?

Toutes les réponses ci-dessus
Texte
Icône
Modèle