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...

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)