Material Design headerbar and icons color

Question

I'm trying to design a website using the Material Design guidelines.

I've a navbar/headerbar with the logo of my website and some icons. The background color is transparent, showing the background image, when the scroll position is on top of the page. When the scroll position is almost 400px, it is dark grey (it fades during the entire 400pxs).

As you can see, the background has some white spikes, so I can't use white icons. But if I use black or dark icons, they are not well visible when the background is dark grey.

What Material Design guidelines say about this kind of problem? I've read I can't use a shadow to make the top of the background darker...

Relevant documentation: http://www.google.com/design/spec/style/imagery.html#imagery-ui-integration

(text protection paragraph)

Answer 1

You could make the transparent bar have a background of black but instead have the opacity set to 20%. Then you could use off white icons and text. Try using Ghostwhite or something like that, since white on black is quite harsh.

You can still have the fade until 400px too. But it will be much smoother.

Answer 2

Could you have the icons fade between the two colors as the background fades? This could be a simple CSS animation class (highly suggested) or anything as complicated as you want.

Answer 3

This is probably not what you want to hear, but according to the google guidelines, you really shouldn't be using an image in the header.

You can use a color overlay on your photos to make the text pop. But if the text or icons don't pop on the image you're using, then you should probably be using an image that works better, or a solid color.

If I were you, I'd use a solid color.