Utilisation de la couleur :
Comprendre le CS 1.4.1
1.4.1 Utilisation de la couleur : la couleur n'est pas utilisée comme la seule façon de véhiculer de l'information, d'indiquer une action, de solliciter une réponse ou de distinguer un élément visuel. (Niveau A)
Note : ce critère de succès traite spécifiquement de la perception des couleurs. Les autres formes de perception sont traitées à la règle 1.3 comme l'accès à la couleur par programme informatique et les autres formes de codage de la présentation visuelle.
Objectif de ce critère de succès
L'objectif de ce critère de succès est de s'assurer que tous les utilisateurs peuvent accéder à l'information qui est véhiculée par des différences de couleur, c'est-à-dire par l'utilisation de couleurs où chaque couleur est porteuse d'un sens qui lui est assigné. Si l'information est véhiculée par des différences de couleur dans une image (ou autres formats non textuels), la couleur peut ne pas être vue par des utilisateurs présentant des limitations dans la perception des couleurs. Dans ce cas, fournir l'information véhiculée par la couleur par un autre moyen visuel garantit la perception de l'information aux utilisateurs qui ne voient pas les couleurs.
La couleur est un atout important de la conception des contenus Web, elle permet de renforcer leur attrait esthétique, leur utilisabilité et leur accessibilité. Cependant, certains utilisateurs ont des difficultés à percevoir les couleurs. Les personnes malvoyantes ont souvent une vision limitée des couleurs et certains utilisateurs âgés ne voient pas correctement les couleurs. En outre, les personnes utilisant des écrans et des navigateurs en texte seul, limités en nombre de couleurs ou monochromes, seront incapables d'accéder à l'information présentée uniquement par la couleur.
Exemples d'informations portées par des différences de couleurs : « les champs obligatoires sont en rouge », « erreur signalée en rouge » et « les ventes de Mary sont en rouge, celles de Tom en bleu ». Les exemples d'indications d'une action sont notamment : l'utilisation de couleurs pour indiquer qu'un lien s'ouvrira dans une nouvelle fenêtre ou qu'une entrée de base de données a été mise à jour avec succès. Un exemple d'une invite sollicitant une réponse serait : l'utilisation du surlignement sur des champs de formulaire pour indiquer qu'un champ obligatoire n'a pas été renseigné.
Note : cela ne devrait en aucun cas décourager l'utilisation de couleurs sur une page, ou même de codes de couleurs si leur utilisation est redondante avec une autre indication visuelle.
Avantages spécifiques du critère de succès 1.4.1 :
Les utilisateurs malvoyants ont souvent une vision limitée des couleurs.
Certains utilisateurs âgés ne sont pas capables de voir correctement les couleurs.
Lorsque les informations véhiculées par les couleurs sont disponibles par d'autres moyens visuels, les utilisateurs qui ont des difficultés de perception des couleurs en tirent parti.
Les personnes utilisant des écrans en texte seul, en couleurs limitées ou monochromes, peuvent ne pas avoir accès aux informations dépendantes de couleurs.
Les utilisateurs qui ont des problèmes pour faire la différence entre les couleurs peuvent regarder ou écouter des indices textuels.
Les personnes qui utilisent des afficheurs braille ou d'autres interfaces tactiles peuvent détecter des indices textuelles au toucher.
Exemples pour le critère de succès 1.4.1
Un formulaire qui utilise la couleur et du texte pour indiquer les champs obligatoires
Un formulaire contient à la fois des champs obligatoires et optionnels. Des instructions au début du formulaire expliquent que les champs obligatoires sont marqués avec du texte en rouge et aussi avec une icône dont l'équivalent textuel est « Obligatoire ». Le texte en rouge et l'icône sont associés par programmation aux champs appropriés afin que les technologies d'assistance des utilisateurs puissent déterminer les champs obligatoires.
Un examen.
Des étudiants visionnent une image SVG d'un composé chimique et identifient les éléments chimiques présents à partir des couleurs utilisées sur le diagramme. Les équivalents textuels associés à chaque élément nomment la couleur de l'élément et indiquent la position des éléments sur le diagramme. Les étudiants qui ne peuvent pas percevoir les couleurs ont les mêmes informations à propos du composé que leurs camarades de classe. (Cette technique permet également de satisfaire la règle 1.1 niveau A.)
Éléments de formulaire désactivés.
Les éléments de formulaire qui sont désactivés par le balisage ou des scripts sont grisés et rendus inactifs par l'agent utilisateur. Lorsqu'ils sont à l'état désactivé ces éléments ne reçoivent pas le focus. Les technologies d'assistance peuvent déterminer par programme l'état des éléments désactivés et fournir cette information à l'utilisateur lorsque les éléments sont rencontrés sur la page. Le changement de couleur et la perte de focus fournissent une information visuelle redondante sur l'état de l'élément.
Ressources liées
Les ressources sont présentées dans un but d'information seulement, il ne s'agit pas d'une approbation.
Lighthouse International: Effective Color Contrast – contraste de couleur efficace (en anglais)
Internetworking: Designing for the Color-Challenged: A Challenge – concevoir pour les déficiences de perception des couleurs : un défi (en anglais)
Colorblind Web Page Filter – un filtre de page pour le daltonisme (en anglais)
Firelily Designs: Color Vision, Color Deficiency – vision des couleurs, daltonisme (en anglais)
Wikipedia: Color Blindness – article en anglais de wikipédia sur le daltonisme.
article en français de Wikipédia sur le daltonismeMicrosoft: Can Color-Blind Users See Your Site? – les utilisateurs daltoniens peuvent-ils voir votre site ? (en anglais)
BT Inclusive Communication: Choosing safe colours – choisir des couleurs sûres (en anglais)
Causes of Color: How do people inherit colorblindness? How often?: Genetics – Les raisons de la couleur : comment les gens héritent du daltonisme ? A quelle fréquence ? : génétique (en anglais)
How to make figures and presentations that are friendly to Colorblind people – Comment faire des figures et des présentations agréables pour les daltoniens (en anglais)
Techniques et échecs pour le critère de succès 1.4.1 - Utilisation de la couleur
Chaque élément numéroté dans cette section représente une technique ou une combinaison de techniques que le groupe de travail des WCAG considère comme suffisante pour satisfaire à ce critère de succès. Les techniques énumérées satisfont le critère de succès seulement si toutes les exigences de conformité aux WCAG 2.0 ont été appliquées.
Techniques suffisantes
Consignes : choisissez parmi les situations suivantes celle qui correspond à votre contenu. Chaque situation comprend des techniques ou des combinaisons de techniques qui sont connues et documentées comme suffisantes par rapport à cette situation.
Situation A : si la couleur de certains mots, arrière-plans, ou tout autre contenu est utilisée pour transmettre de l'information :
Techniques (recommandées) supplémentaires pour 1.4.1
Bien qu'elles ne soient pas nécessaires à la conformité, les techniques supplémentaires suivantes devraient être envisagées afin de rendre le contenu plus accessible. Toutes ces techniques ne peuvent pas être utilisées ou ne seraient pas efficaces dans toutes les situations.
Véhiculer de l'information redondante en utilisant la couleur (lien à venir)
Échecs fréquents pour le CS 1.4.1
Le groupe de travail des WCAG considère les erreurs fréquentes suivantes comme des échecs du critère de succès 1.4.1.