Les différences de couleur qui comportent également des différences de luminosité importantes échouent-elles aux WCAG 2.0 SC 1.4.1: Utilisation de la couleur?
J'ai rencontré une énigme avec WCAG 2.0 Success Criteria 1.4.1: Use of Color tout en évaluant un projet interne pour la conformité WCAG niveau AA.
Parmi mon évaluation, j'évalue les contrôles qui fournissent un indicateur basé sur une couleur qui fortement contraste avec les éléments environnants en termes de luminosité. Ces contrôles sont les suivants (les captures d'écran proviennent de Bootstrap):
Pagination, implémentée avec composant de pagination de Bootstrap , où la page active n'est indiquée que par la couleur (je pense):
![a row of numbers, with one selected]()
Filtres, basés sur groupes de boutons de Bootstrap , où le filtre actif/choisi est indiqué par la couleur:
![to do, doing, complete: to do is highlighted.]()
Tous ces éléments ont également divers attributs Aria ajoutés (par exemple, sélectionnés par aria), mais cela est peu pertinent pour quelqu'un qui n'utilise pas de technologie d'assistance.
The Crunch: Est-ce que ceux-ci réussissent ou échouent Critères de succès 1.4.1: Utilisation de la couleur?
Est-ce suffisant pour indiquer la page active et le filtre actif?
Par la lettre, ceux-ci ont juste une couleur différente, donc je pensez ceux-ci échouent. C'est comme leur exemple donné de "Les ventes de Mary sont en rouge, Tom sont en bleu", sauf qu'il n'est pas sélectionné en blanc, sélectionné en bleu.
Cependant, ces éléments ont également d'énormes différences de contraste, et même quelqu'un qui est complètement daltonien verra qu'un contrôle est assombri. Cela satisfait tout le monde sauf:
- Les personnes utilisant des affichages texte uniquement, à couleurs limitées ou monochromes peuvent ne pas être en mesure d'accéder aux informations dépendant des couleurs.
... mais je ne suis pas sûr de ce que ces gens verraient vraiment, et de ce qui leur serait utile si beaucoup d'informations étaient jetées de toute façon.
Avons-nous besoin d'ajouter plus, comme une flèche ou un point à la page et au filtre sélectionnés, ou une autre rubrique indiquant par exemple "Page 1:" ou "A faire:" qui porte un indicateur évident de ce que vous voyez, ou est-ce suffisant pour avoir cette différence comme indicateur?
Une recherche rapide sur Google m'a conduit à cet article informatif sur le daltonisme . Vous voudrez peut-être jeter un œil à la question UX, Test pour les personnes daltoniennes Cela vous donnera des ressources pour vous assurer que vous prenez soin des carences en couleurs. En plus de cette question, il existe des extensions chrome (comme Spectrum , voir ) pour simuler les carences de couleur.
L'idée de base n'est pas d'utiliser la couleur comme seul moyen de faire la distinction. Ce problème est plus amplifié lorsque différentes couleurs sont utilisées pour montrer une sorte de distinction. Plus d'une couleur peut se réduire en niveaux de gris pour ceux qui ont des défauts de couleur et donc rendre difficile de discerner la différence que vous essayez de montrer.
En ce qui concerne votre interface utilisateur, si vous utilisez une seule couleur avec du blanc, cela va se réduire à une échelle de gris offrant toujours des indices visuels aux utilisateurs pour différencier les éléments de votre site. Si à l'avenir vous choisissez d'inclure une autre couleur, par exemple des liens désactivés, des boutons secondaires, etc., vous devez vous assurer que les couleurs actives et désactivées que vous utilisez ne sont pas réduites au même niveau de gris. Les outils mentionnés ci-dessus vous aideront à en déduire.
Actuellement avec une seule palette de couleurs, il ne devrait pas y avoir de problème.
Étant donné que la différence de contraste est élevée, pour les utilisateurs avec des écrans réguliers, je pense que le format que vous utilisez devrait être OK.
Si vous optez pour une accessibilité complète, pour les affichages texte uniquement vous auriez probablement besoin d'une mise en forme texte uniquement comme [Active] Inactive Inactive, pour les lecteurs audio (utilisateurs aveugles), vous aurez peut-être besoin d'un texte indiquant "l'option 1 est active" (peut-être en utilisant une image de taille 0 avec alt texte).