web-dev-qa-db-fra.com

Accessibilité du site - Schémas de couleurs à éviter

Le marketing de notre entreprise a une forte préférence pour le bleu sur le bleu dans notre application (c'est-à-dire un fond dégradé bleu, avec un fond d'en-tête bleu clair et une nuance de texte bleu foncé).

Évidemment, à mon avis au moins, tout ce bleu a l'air plutôt mauvais. Mais les casser de ce fétiche est assez difficile à faire.

Je suis conscient que le daltonisme est une considération importante dans les schémas de couleurs pour les sites Web, mais je dois trouver des études/articles qui montrent explicitement que le bleu sur les schémas bleus est un enfer pour les personnes atteintes de certaines formes de daltonisme.

Quelqu'un peut-il m'indiquer des articles comme ceux-ci? J'en trouve pas mal sur le daltonisme en général, mais ils ont tendance à être moins spécifiques.

Mise à jour

Pour référence, voici quelques-unes des valeurs de couleur:

  • Arrière-plan de la page: # 00204F - ou Dégradé si disponible (# A0BBE6 -> # 00204F)
  • Texte d'en-tête de page: # 003391 (fond transparent)
  • Zone de travail
    • Contexte: # DBE6F4
    • Arrière-plan de sous-en-tête: #BFDBFF
    • Texte de sous-en-tête: # 003391
    • Texte de l'étiquette: # 003366
4
Obsidian Phoenix

Le problème n'est pas tellement avec des couleurs spécifiques, mais avec des rapports de couleur contraste.

Directive WCAG 1.4.3 Contraste (minimum):

1.4.3 Contraste (minimum): La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1, à l'exception des éléments suivants: (Niveau AA)

  • Grand texte: le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d'au moins 3: 1;

  • Incident: le texte ou les images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont de la décoration pure, qui ne sont visibles par personne, ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont aucune exigence de contraste.

  • Logotypes: le texte faisant partie d'un logo ou d'une marque n'a pas d'exigence de contraste minimum.

À la fin de la journée, vous pouvez avoir la combinaison de couleurs que vous souhaitez. Heck, vous pouvez avoir du gris clair sur blanc si vous le souhaitez. Ce n'est pas exactement illégal. Mais s'il échoue aux directives de contraste des couleurs WCAG, votre site ne sera pas accessible et vous excluez de nombreux utilisateurs de votre site Web. Cela vous fera perdre des ventes potentielles, nuira potentiellement à votre réputation et vous ouvrira même des poursuites parce que vous empêchez certaines personnes d'accéder à votre contenu.

Peut-être que votre combinaison bleue est accessible. Vous ne spécifiez pas les codes hexadécimaux pour eux, nous ne pouvons donc pas en être sûrs. Il est peu probable qu'il soit conforme AAA ( qui nécessite un contraste de 7: 1 ), mais pourrait éventuellement être conforme AA.

Il existe différents contrôleurs de contraste de couleurs, comme le populaire Snook.ca un, alors parcourez les couleurs et voyez ce qui sort.

En outre, le site d'accessibilité webaim.org discute de la cécité bleue. Les bleus sont les couleurs les moins affectées pour les personnes daltoniennes - le rouge/vert est beaucoup plus courant, mais il y a des personnes ayant des carences en bleu:

Tritanopie (carences bleues)

La tritanopie est beaucoup moins courante que les autres catégories mentionnées ci-dessus. La tritanopie est l'insensibilité aux courtes longueurs d'onde (les bleus). En général, les bleus et les verts peuvent être confondus, mais les jaunes sont également affectés en ce qu'ils peuvent sembler disparaître ou apparaître sous forme de nuances de rouge plus claires.

Cependant, ce n'est pas parce que les gens ne peuvent pas déterminer si bien le bleu que votre contenu leur sera inaccessible, à condition que le contraste soit correct et qu'il soit toujours lisible. Cela ne semblera pas bleu à certaines personnes.

6
JonW