Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Cette page a été traduite par l'API Cloud Translation.

Couleur et contraste

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.

Sable arc-en-ciel original. — </ph> Photo d'Alexander Grey sur Unsplash.

Motif arc-en-ciel original. — </ph> Photo de Clark Van Der Beken sur Unsplash.

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

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

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

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">

Source

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.

Interface utilisateur des paramètres Mac — Paramètres généraux de macOS pour l'apparence.

Comparez les modes clair et sombre.

Exemple de code en mode clair. — Mode clair

Exemple de code en mode sombre. — 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">

Source

@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).

Comparer les contrastes régulier et élevé.

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 une préférence de contraste élevé. — Mode sombre, préférence de contraste élevé.

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.

Comparez les couleurs et les contrastes.

Mode clair, contraste régulier — Mode clair, aucune préférence de contraste

Mode sombre, contraste régulier — 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

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 ?

Schéma

Pas tout à fait. Les motifs ne suffisent pas à aider un utilisateur à identifier un élément d'interface utilisateur.

Texte

Pas tout à fait. Le texte seul n'est peut-être pas suffisant pour aider l'utilisateur à identifier un élément d'interface utilisateur.

Icône

Pas tout à fait. Une icône seule ne suffit pas à aider un utilisateur à identifier un élément d'interface utilisateur.

Toutes les réponses ci-dessus

Oui. Au moins deux identifiants permettent à l'utilisateur d'identifier un élément d'interface utilisateur.