web-dev-qa-db-fra.com

Contraste élevé / couleurs visibles pour google maps

Je crée des marqueurs personnalisés pour une application qui utilise Google Maps

Ils représentent une dépanneuse et une voiture cassée.

Une contrainte importante est qu'ils doivent contraster avec la carte ci-dessous, dans de nombreuses situations. Cela exclut, par exemple, le bleu clair (faible contraste avec l'eau) et le vert clair (faible contraste avec les parcs)

Dans l'exemple, nous avons une dépanneuse (dont je suis satisfait) et une voiture cassée (qui, je pense, a un mauvais contraste).

Quelles couleurs conviendraient bien?

Je comprends qu'il existe une théorie des couleurs dans le design, mais je n'en sais rien. Une explication accompagnée de bons conseils serait extrêmement précieuse.

example

4
josinalvo

Il y a quelques choses à retenir de la théorie des couleurs: Teinte, Saturation et Luminosité. Voici une bonne référence: http://www.colorsontheweb.com/Color-Theory/Color-Contrast

Si je recherche deux couleurs avec un contraste maximum, j'utilise le WebAIM Color Contrast Analyzer: https://webaim.org/resources/contrastchecker/

Il vous donnera 4 notes basées sur vos 2 couleurs. Les 4 notes se réfèrent aux directives d'accessibilité du contenu Web. Vous devriez rechercher un PASS sur les 4 notes pour un contraste et une lisibilité maximaux.

Il vous suffit de coller les couleurs de Google Maps comme arrière-plan, puis d'expérimenter avec les couleurs de premier plan et la luminosité pour obtenir le contraste souhaité, tout en conservant votre palette de couleurs ou toute marque.

Les couleurs utilisées par Google Maps (AFAIK à partir d'une capture d'écran que j'ai prise) sont:

  • Eau: # A3CCFF
  • Parcs: # CBE6A3
  • Urbain: #DFDFDF
  • Rues: # FDE7C4
  • Autoroutes: # FED89D
3
kerr

Heureusement pour vous, la plupart des gens savent rechercher ces balises en forme de goutte dans Google Maps. Cela rend votre travail de sélection des couleurs plus facile (ce n'est pas si critique).

Je jouerais prudemment et ne choisirais PAS une couleur. Google Maps utilise déjà la plupart des couleurs dans la boîte de crayons. Et qui sait quelles fonctionnalités arriveront à l'avenir. Par conséquent, l'utilisation d'une forme de solide noir avec un "jaune de construction" se démarquerait plus que tout, OMI.

Je serais également courageux et admettrais que les deux icônes n'ont pas besoin d'être de couleurs distinctes si vous n'utilisez que deux balises.

enter image description here

2
jhurley