Couleurs pour marquer les articles, qu'en est-il des articles en noir et blanc?
Nous construisons une application de transport en commun et souhaitons utiliser des couleurs pour désigner les lignes de train (qui correspondent aux descriptions des compagnies de train: ligne jaune, ligne bleue, etc.). Nous avons donc trouvé la capture d'écran ci-jointe, très basique.
Cependant, dans certaines parties du monde, il y a des lignes noires, des lignes blanches! Nous sommes un peu coincés ici, des pensées? Tks.
Comme l'a proposé @laurendankiewicz, vous pouvez utiliser l'icône décrite, comme illustré:
Mais je pense que vous devez également considérer:
- Vous ne devez pas utiliser le code couleur comme seul moyen de transmettre des informations pour des raisons d'accessibilité. Vous pouvez utiliser des outils comme NoCoffee vision simulator pour l'évaluer
- Si la couleur de la ligne est une information importante pour un utilisateur, il est préférable de la mettre en évidence de manière plus visible. Les couleurs des lignes semblent compréhensibles dans le contexte (comme la carte du métro), tout en utilisant uniquement une icône colorée transmet les informations pas si importantes
Il y a des problèmes d'accessibilité importants en utilisant simplement les couleurs comme indicateurs visuels pour les utilisateurs car les utilisateurs daltoniens pourraient avoir du mal à différencier les différentes couleurs les unes des autres, rendant l'application inutile pour eux . Pour citer les directives WCAG
Assurez-vous que le texte et les graphiques sont compréhensibles lorsqu'ils sont affichés sans couleur.
Si la couleur seule est utilisée pour transmettre des informations, les personnes qui ne peuvent pas faire la différence entre certaines couleurs et les utilisateurs d'appareils dotés d'un écran non couleur ou non visuel ne recevront pas les informations.
Par exemple, en prenant la capture d'écran que vous venez de fournir, voici ce qu'une personne atteinte de deutéranope (daltonisme rouge/vert) verrait
Comme vous pouvez le voir, il avait du mal à découvrir que la ligne verte n'était pas réellement la ligne brune (en supposant que vous en ayez une et ainsi de suite).
Ma suggestion serait de fournir également du texte avec l'icône pour informer l'utilisateur de quelle ligne il s'agit, cela aiderait également à résoudre votre problème de s'appuyer uniquement sur la couleur comme indicateur visuel .
Google maps utilise une couleur singulière pour ses icônes mais utilise des cases ombrées avec la couleur qui y est mentionnée comme indicateurs visuels des couleurs auxquelles elles se réfèrent .
Pour le train blanc, vous pouvez délimiter le cercle en gris (le cercle lui-même serait rempli de blanc), puis votre train serait délimité en gris. De cette façon, vous obtenez votre fond blanc et le train est toujours visible.
Pour les lignes de train noires, vous pouvez avoir le cercle de fond noir, avec un train blanc.
Je suppose que si vous le rendez blanc/noir en relation avec fond et autres pistes, ça devrait aller.
De plus même une ligne blanche serait indiquée d'une certaine manière dans d'autres endroits non numériques, comme les panneaux d'affichage, les panneaux d'information, etc. Vous pouvez vous inspirer de ces données. La présence de brique et de mortier devrait être très similaire à la façon dont l'application la représente. Ceci est essentiel pour la relativité (et l'image de marque le cas échéant)
Seul FFF ne fait pas de blanc, si vous avez un bleu/rouge/blanc, alors une couleur très claire facilement différenciée du reste des pistes et l'arrière-plan devrait être assez bonne pour désigner la couleur blanche. Même chose pour la couleur noire.
Le torréfacteur de couleurs HTML a de nombreuses couleurs claires qui, associées aux bordures et aux traits, devraient faire l'affaire.
Une pensée plus radicale aurait un déploiement séparé en fonction du pays et remplacerait les actifs du train par un cercle de W, G, B, etc., mais grattez cela, c'est un tout dernier recours. Je ne l'aime pas beaucoup moi-même.
pour "ligne blanche" pourquoi ne pas utiliser la même chose avec du noir comme remplissage. Et pour la 'ligne noire', optez pour le train noir avec remplissage gris, une couleur comme #efefef ou # f0f0f0.