Avez-vous déjà essayé de lire du texte sur un écran et trouvé le contenu difficile à lire en raison au jeu de couleurs ou eu du mal à voir l’écran dans un environnement très lumineux ou dans un environnement faiblement éclairé ? Ou peut-être êtes-vous quelqu’un avec une couleur plus permanente de problèmes de vue, comme les 300 millions de personnes atteintes de daltonisme (selon les estimations). ou les 253 millions de personnes malvoyantes ?
En tant que concepteur ou développeur, vous devez comprendre comment les gens perçoivent la couleur et le contraste, qu'elles soient temporaires, en fonction de la situation ou de manière permanente. Cela vous aidera que vous répondiez au mieux à ses besoins visuels.
Ce module présente quelques principes de base accessibles concernant les couleurs et les contrastes.
Perception de la couleur
Saviez-vous que les objets n'ont pas de couleur, mais reflètent des longueurs d'onde léger ? Lorsque vous voyez de la couleur, vos yeux reçoivent et traitent ces longueurs d'onde et les convertir en couleurs.
Lorsqu'il s'agit d'accessibilité numérique, nous parlons de ces longueurs d'onde en termes de teinte, de saturation et de luminosité. Le modèle TSL a été créé alternative au modèle de couleurs RVB et s'aligne plus étroitement sur la façon perçoit la couleur.
La teinte est une manière qualitative de décrire une couleur, comme le rouge, le vert ou le bleu, où chaque teinte a une zone spécifique dans le spectre de couleurs avec des valeurs allant de 0 à 360, rouge à 0, vert à 120 et bleu à 240.
La saturation est l'intensité d'une couleur, mesurée en pourcentages compris entre 0% à 100%. Une couleur avec une saturation totale (100%) sera très vive, alors qu'une couleur sans saturation (0%) s'affiche 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 compris de 0% (noir) à 100% (blanc).
Mesure du contraste des couleurs
Afin d'aider les personnes souffrant de divers handicaps visuels, le groupe WAI a créé un formule de contraste des couleurs pour s'assurer que le contraste est suffisant entre le texte et son arrière-plan. Lorsque ces rapports de contraste des couleurs sont les personnes malvoyantes peuvent lire du texte en arrière-plan. sans avoir besoin d'une technologie d'assistance qui améliore le contraste.
Examinons des images avec une palette de couleurs éclatantes et comparons la façon dont cette image apparaîtrait à ceux qui souffrent de formes spécifiques de daltonisme.
Sur la gauche, l'image montre un arc-en-ciel de sable avec les couleurs violette, rouge, orange, jaune, vert turquoise, bleu clair et bleu foncé. Sur la droite se trouve un motif arc-en-ciel multicolore plus lumineux.
Deutéranopie
Deutéranopie (couramment appelée "aveugle vert") affecte 1 % à 5 % des hommes, 0,35 à 0,1 % des les femmes.
Les personnes atteintes de deutéranopie ont une sensibilité réduite à la lumière verte. Ce filtre de daltonisme simule ce type de daltonisme.
Protanopie
Protanopie (communément appelé daltonisme) affecte 1,01% à 1,08% des hommes et 0,02% des 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 monoochromatisme
L'acromatopsie ou le monoochromatisme (ou le daltonisme total) se produit très, très rarement.
Les personnes atteintes d'acromatopsie ou de monoochromatisme n'ont presque aucune perception du rouge, une lumière verte ou bleue. Ce filtre de daltonisme simule ce que ce type le daltonisme.
Calculer le contraste des couleurs
La formule du contraste des couleurs utilise le
luminance relative de
couleurs pour aider à déterminer le contraste, qui peut aller de 1 à 21. Cette formule
est souvent abrégé en [color value]:1
. Par exemple, du noir pur
le blanc a le plus grand rapport de contraste des couleurs avec 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
Les textes de taille standard, y compris les images de texte, doivent présenter un rapport de contraste des couleurs
de 4.5:1
pour transmettre
exigences minimales concernant les WCAG pour la couleur.
Le rapport de contraste des couleurs du texte de grande taille et des icônes essentielles doit être de 3:1
.
Les textes de grande taille doivent mesurer au moins 18 pt / 24 px ou 14 pt /
18,5 pixels en gras. Cette couleur ne s'applique pas aux logos ni aux éléments décoratifs
les exigences de contraste.
Heureusement, aucun calcul mathématique avancé n'est requis, car il existe de nombreux outils faire les calculs de contraste des couleurs pour vous. Des outils tels que Adobe Color, Analyseur de contraste des couleurs, Leonardo Sélecteur de couleur des outils de développement Chrome peut vous indiquer rapidement le rapport de contraste des couleurs et proposer des suggestions pour vous aider créer les paires de couleurs les plus inclusives et les palettes.
Utiliser la couleur
Sans bons niveaux de contraste des couleurs en place, les mots, les icônes et les autres éléments difficiles à découvrir, et la conception peut rapidement devenir inaccessible. Mais il est également important de payer attention à l'utilisation de la couleur à 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 n'ajoutez aucun contenu ni identifiant supplémentaire au bouton, il est difficile pour les personnes atteintes de certains types de daltonisme de savoir sur quel bouton pour cliquer. De même, de nombreux graphiques, diagrammes et tableaux utilisent la couleur seule pour transmettre des informations. L’ajout d’un autre identifiant, comme un motif, du texte ou une icône, essentielle 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 des rapports de contraste des couleurs et de l'utilisation des couleurs à l'écran, nous vous conseillons d'appliquer la stratégie d'enchères requêtes média qui proposent aux utilisateurs plus de contrôle sur ce qui s'affiche à l'écran.
Par exemple, la requête média @prefers-color-scheme
vous permet de créer un thème sombre qui peut être utile aux personnes souffrant de photophobie ou de sensibilité à la luminosité. Vous pouvez également créer un thème à contraste élevé à l'aide de @prefers-contrast
, qui s'adresse aux personnes souffrant de déficiences de couleur et de sensibilité au contraste.
Préfère un jeu de couleurs
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
La requête média @prefers-color-scheme
permet aux utilisateurs de choisir un éclairage ou
version sombre du site web ou
de l'application qu'il visite. Comme vous le voyez,
le 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 média. Consultez les
Mac et
Instructions Windows pour le mode sombre.
Préfère le contraste
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
@prefers-contrast
Une requête média vérifie les paramètres de l'OS de l'utilisateur pour voir si le contraste élevé est activé
ou éteint. Vous pouvez observer ce changement de thème en action en modifiant le contraste
paramètres de préférence et navigation vers un navigateur compatible avec cette requête média
(paramètres du mode de contraste sur Mac et Windows).
Superposer les requêtes média
Vous pouvez utiliser plusieurs requêtes média axées sur les couleurs pour offrir à vos utilisateurs
les choix possibles. Dans cet exemple, nous avons empilé @prefers-color-scheme
et
@prefers-contrast
ensemble.
Testez vos connaissances
Testez vos connaissances sur la couleur et le contraste
La couleur seule ne suffit pas pour la documentation. Qu'est-ce qui permettra aux lecteurs d'identifier les éléments de l'interface utilisateur ?