4

I am creating some custom markers for an application that uses google maps

They stand for a tow truck and a broken car.

An important constraint is that they must contrast with the map bellow, in many situations. That excludes, for example, light blue (low contrast with water) and light green (low constrast with parks)

In the example, we have a tow truck (that I am happy with) and a broken car (that I think has poor contrast).

What colors would be a good fit?

I understand there exists some color theory in design, but I know nothing about it. An explanation with good pointers to that would be expecially invaluable.

example

3

There are a few things to remember from color theory: Hue, Saturation and Lightness. Here is a good reference: http://www.colorsontheweb.com/Color-Theory/Color-Contrast

If I'm looking for two colors with maximum contrast, I use the WebAIM Color Contrast Analyzer: https://webaim.org/resources/contrastchecker/

It will give you 4 ratings based on your 2 colors. The 4 ratings refer to the Web Content Accessibility Guidelines. You should be looking for a PASS on all 4 ratings for maximum contrast and readability.

Just paste in the colors from Google Maps as the background and then experiment with foreground colors and lightness to achieve the contrast you want, while still maintaining your color palette or any branding.

Colors Google Maps uses (AFAIK from a screenshot I took) are:

  • Water: #A3CCFF
  • Parks: #CBE6A3
  • Urban: #DFDFDF
  • Streets: #FDE7C4
  • Highways: #FED89D
2

Lucky for you, most people know to look for those drop-shaped tags in Google Maps. This makes your job of selecting colors easier (it's not that critical).

I would play it safe and NOT choose a color. Google Maps already uses most colors in the crayon box. And who knows what features are coming in the future. Therefore, using a Solid Black shape with a "Construction Yellow" would stand out more than anything, IMO.

I would also be brave and admit that the two icons do not need to be separate colors if you're only using two tags.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.