Instead of using gray text and icons on top of colored backgrounds, create better contrast by displaying white or black text with reduced opacity.

For example, black text displayed at 75% opacity on a green background gives the text an appearance of black, with a hint of green.

Alternatively, you can calculate the color of text by doing the following:

• Place the color black at reduced opacity in front of a green background
• Identify the hex value of the resulting darkened green color
• Use that hex value of that color for your text In this case, if the surface behind the text changes color, you must update the hex color as well.