Les couleurs d'alerte sont vraiment conviviales pour les utilisateurs daltoniens?
J'ai vu de nombreuses boîtes d'alerte se différencier en utilisant uniquement des couleurs, même bootstrap a donné. Cette boîte a-t-elle été vraiment conviviale pour les utilisateurs daltoniens?
Réponse rapide
Dans votre cas, ce jeu de couleurs n'est PAS sûr pour les personnes daltoniennes. Tout d'abord, n'oubliez pas qu'il existe différents types de déficience de la vision des couleurs. Résumons pourquoi votre image n'est pas sûre (pour reproduire cela, choisissez simplement deux différents simulateurs de daltonisme en ligne):
- Achromatopsie: ils ne voient que des nuances de gris alors évidemment toutes les cases ont la même couleur, ce qui ne va pas avec ce schéma de couleurs, c'est que le jaune et le vert ont une luminosité trop similaire et ils peuvent facilement être confondus.
- Protanopie: les cases vertes et rouges apparaîtront comme des nuances de la même couleur.
- Deutéranopie: probablement OK.
- Tritanopie: Presque OK, le jaune et le rouge apparaîtront comme des nuances de la même couleur.
- Protanomalie: OK.
- Deutéranomalie: OK.
- Tritanomalie: OK.
- Monochromie du cône bleu: OK.
Après avoir effectué ces tests de base, vous devez simuler différents profils de couleurs pour être sûr que des couleurs similaires ne seront pas confondues (dans ce cas, la protanopie est un excellent exemple). Vous pouvez également avoir besoin de quelques moniteurs différents (avec des profils différents et une qualité différente, sauf si vous êtes sûr de la configuration matérielle de vos utilisateurs.)
Voulez-vous un exemple concret? Modifiez la couleur de l'icône "réalisations" lorsqu'elle est mise en surbrillance (pour les utilisateurs atteints de Deutéranopie) . La réponse fournit une simulation, veuillez également noter la couleur rougeâtre du bouton coché sous "Poser une question". Notez également que si vous n'êtes pas daltonien, vous pouvez penser que simulé l'image est assez bien parce que les tons peuvent être distingués, mais OP dit que "... surligné en vert, il est encore assez proche de la couleur grise dans son état inactif".
Discussion générale
En règle générale , la couleur ne doit pas être le seul support utilisé pour transmettre des informations . Dans votre exemple, vous avez également du texte et cela peut-être être suffisant (cependant pensez à suggestion d'Andrew sur le contraste). Images mai aide mais elles n'ajoutent pas beaucoup plus que du texte à moins que vous n'utilisiez des images que pour des avertissements et des erreurs, dans ce cas une variation de norma sera notée.
Il existe cependant des cas où la couleur est également utilisée pour attirer l'attention de l'utilisateur (par exemple une alarme sur un tableau de bord). Il existe d'autres techniques pour attirer l'attention (changements de taille/style de police et d'animations, par exemple.) Les images doivent être interprétées alors elles ne sont pas bonnes pour cela, ce qu'un utilisateur notera est le changer, pas l'image elle-même. Pour cette raison, j'ai suggéré d'ajouter des images uniquement pour les avertissements et les erreurs (si chaque boîte a une image différente, alors important les images passeront inaperçues.) Des tonnes de livres ont été écrits à ce sujet et c'est peu peu en dehors de la portée de cette question ...
Il n'est pas facile de trouver un schéma de couleurs adapté à toutes sortes de carences, alors ce qu'il faut faire est de choisir soigneusement différentes nuances pour rendre les couleurs faciles à distinguer (et pour éviter que le vert et le rouge ne ressemblent à la protanopie). C'est une tâche difficile car la palette doit être Nice également pour les personnes ayant une vision des couleurs normale.
Dans un environnement critique, vous pouvez ne pas accepter ces compromis et proposer des palettes différentes. Notez que pour les applications vitales, les tests doivent également être effectués avec au moins quelques personnes daltoniennes pour les types les plus courants de daltonisme, vous devez être sûr que votre l'interface utilisateur ne facilitera pas les erreurs humaines.
Quelques théories
Il existe de nombreux livres et ressources en ligne sur ce sujet, alors veuillez considérer ceci juste un bref aperçu.
La deutéranomalie (sensibilité réduite à la lumière verte) et la protanomalie (sensibilité réduite à la lumière rouge) sont les types de daltonisme les plus courants (en ce moment et AFAIK). Pour la plupart/la plupart des applications, ce sont les tests de base que vous devez effectuer.
L'achromatopsie, la protanopie, la deutéranopie et la tritanopie (vision chromatique dichromatique) sont beaucoup plus rares, mais elles affectent également plus sérieusement l'apparence de votre interface utilisateur. Les problèmes majeurs sont causés par la protanopie qui peut provoquer une confusion entre certaines nuances de gris avec du rouge et certaines nuances de vert/bleu avec du rouge/orange. La confusion la plus critique causée par la deutéranopie est certaines nuances rouges avec du vert.
Un échantillon rapide de Color Universal Design (CUD) - Comment faire des figures et des présentations qui sont amicales pour les personnes daltoniennes - par Masataka Okabe et Kei Ito (initialement publié sur Quelles couleurs choisir pour personnes daltoniennes? ):
Comment tester?
Je vois qu'il y a souvent une approche trop simple à ce problème, alors permettez-moi de résumer comment vous devez effectuer ces tests. Il n'est pas toujours nécessaire d'avoir une approche rigoureuse, mais pour certaines applications, il est utile et nécessaire que vous feriez mieux de le savoir. Lisez ceci cum grano salis et utilisez ce qui est plus approprié.
1) Choisissez un profil de couleurs ICC pour simuler le daltonisme et effectuez vous-même des tests. Faites cela au moins pour les types de daltonisme les plus courants.
2) Utilisez un outil (il existe également de bonnes ressources en ligne) pour simuler tous les types de daltonisme pour tous les écrans pertinents de votre application. Effectuez une analyse qualitative pour déterminer si les nuances de couleur sont toujours faciles à distinguer et si les utilisateurs de daltoniens peuvent être très confus. N'oubliez pas de mesurer également le contraste du texte.
3) Répétez les points 1 et 2 avec différents moniteurs car le profil de couleur peut varier considérablement de votre moniteur de référence calibré en couleur. Vous pouvez simuler cela en utilisant des profils de couleurs mais si possible j'utilise quelques moniteurs bon marché différents (car la luminosité et le contraste joueront également un rôle énorme.)
4) Répétez le test formel de l'expérience utilisateur en utilisant ces profils de couleurs. Il n'a pas besoin d'être un test complet et vous devez vous concentrer sur la réactivité des utilisateurs (aux alertes et trouver des éléments à l'écran) et fatigue. Faites cela au moins pour les types de daltonisme les plus courants. Encore une fois, ce test devrait être effectué en utilisant au moins deux moniteurs différents (un calibré et un pas cher.)
5) Si possible (et votre application a des exigences de sécurité strictes), répétez les tests d'expérience utilisateur en utilisant peu de personnes daltoniennes. Ceci est important car il existe différents niveaux de déficience de vision des couleurs alors un test réel est nécessaire. Malheureusement, vous ne pouvez pas obtenir un bon échantillon, alors vous pouvez simplement choisir une personne et effectuer un test rapide pour valider les résultats simulés du point 4. J'avoue que pour mes projets personnels, j'ai toujours utilisé mon père (deutéranopie légère) pour cela ...
Vous devriez envisager de vérifier toutes les options de palette de couleurs à l'aide d'un simulateur en ligne tel que Coblis ( http: //www.color-blindness). com/coblis-color-blindness-simulator / ), qui vous montre à quoi ressemblent les images simulant diverses variations de daltonisme:
Il est également généralement admis que pour se prémunir contre ce type de problème, , il peut être judicieux d'utiliser la forme, le contraste et/ou des icônes pour différencier davantage les options. . Vous pouvez entendre une excellente histoire à ce sujet par Matt Desio de la conférence Enterprise UX 2016, dans les sessions de narration (vers 21h00 dans cette vidéo):
Bien qu'important, le daltonisme n'est pas nécessairement pertinent dans ce cas.
Si les alertes sont positionnées de manière à ne pas pouvoir être confondues avec quoi que ce soit d'autre et que différents types d'alertes ne se distinguent pas uniquement par la couleur (signalant le type d'alerte dans le texte comme dans les exemples par exemple), il ne devrait pas y avoir de problème .
Cependant, en regardant les exemples inclus dans la question, je dirais qu'il peut y avoir un problème avec le contraste des couleurs - la différence entre les couleurs du texte (premier plan) et de l'arrière-plan ne semble pas être assez forte pour passer les tests d'accessibilité. Le bleu et le vert échouent AAA pour le petit texte tandis que le jaune et le rouge échouent tous sauf AA pour le grand texte.
Vous n'utilisez pas la couleur seule pour communiquer un sens - vous utilisez couleur ET texte.
Il vous suffit donc de vous assurer que la couleur de premier plan (le texte et l'icône de fermeture) et la couleur d'arrière-plan ont un contraste visuel suffisant pour qu'il soit facile de lire le texte et de cliquer sur l'icône de fermeture.
J'ai vérifié les niveaux de contraste de ces alertes Bootstrap et celles-ci répondent aux exigences de contraste WCAG2.0.
Donc, en résumé, le daltonisme est potentiellement un hareng rouge dans ce cas en raison du texte communiquant son objectif et de l'icône de fermeture se démarquant de la couleur d'arrière-plan.
De toute évidence, dans d'autres situations, il est toujours très important de réfléchir à la façon dont votre page apparaîtra à une personne atteinte de daltonisme et l'utilisation d'un simulateur de daltonisme est une tâche si simple pour identifier les problèmes potentiels.
En général, l'encodage d'informations importantes par la couleur seule ou même la couleur et le texte est une mauvaise idée.
La perception des couleurs varie selon le contexte. Nous pouvons facilement voir la vérité lorsque nous pensons à la difficulté de reconnaître la couleur la nuit, même si nous avons une perception des couleurs meilleure que la moyenne à la lumière du jour.
Et beaucoup de gens n'ont pas une bonne perception des couleurs. La confusion des couleurs rouge-vert et bleu-orange est assez courante, mais certaines personnes ne perçoivent pas du tout la couleur. Et certains ont des cataractes congénitales ou liées à l'âge, qui ont pour effet de rendre tout plus pâle.
De plus, certaines personnes passent par la vie, ou une partie importante de celle-ci, ignorant leur perception limitée des couleurs. Ils s'en sortent car il n'y a pas beaucoup de situations où la couleur est le seul différenciateur. Mettez les lentilles rouges et vertes sur un feu de circulation et il y aurait une augmentation mesurable du nombre d'accidents de la route à cette intersection.
Presque aucun panneau routier ne dépend de la couleur pour cette même raison. La forme - la caractéristique iconique la plus basique - est utilisée à la place, généralement exprimée en couleur mais pas par couleur. (J'inclurais des exemples, mais je pense qu'ils sont probablement déjà suffisamment connus: triangle = avertissement, anneau = erreur (potentielle), rectangle = info).
Les quatre exemples de boîtes de message transmettraient leur signification de base (info, avertissement, erreur et satisfaction) beaucoup plus fortement en utilisant des icônes de signalisation standard.
Les utilisateurs daltoniens peuvent distinguer différents tons d'une couleur et ont plus de difficultés à distinguer les différentes couleurs. Le rouge et le vert peuvent être identiques pour les utilisateurs daltoniens. Cependant, il existe différents types de daltonisme.
Photoshop a une option pour tester une image pour le daltonisme: Protanopie et Deutéranopie . J'ai essayé les deux fonctions et cela montre que votre exemple est convivial pour le daltonisme.
J'ai toujours suivi la règle de m'assurer que vous avez deux indicateurs qui distinguent quelque chose. Dans votre cas, vous avez la couleur + le texte. Cela signifie que vous devez vous assurer que les indicateurs (c'est-à-dire "avertissement") apparaissent TOUJOURS avec les messages, même si vous avez la couleur comme indicateur.
Il en va de même pour les icônes colorées. Vous ne devez jamais utiliser la même icône et simplement changer la couleur. Modifiez toujours l'icône et la couleur de chaque élément. Un bon exemple de cela est un feu de stop. Imaginez si toutes les couleurs étaient sur une seule ligne. Il serait très difficile pour certaines personnes de dire de quelle couleur était la lumière. Au lieu de cela, la position (forme) permet de distinguer chaque couleur. Donc allumé + éteint + éteint = rouge pour quelqu'un qui ne peut pas dire que la couleur de la lumière supérieure est rouge.