Instead of utilizing text opacity you can calculate the color of text to layer on top of colored backgrounds with the following steps:
- Place the color black at reduced opacity in front of your desired colored background
- Identify the hex value of the resulting darkened color
- Use that hex value of that color for your text

Calculating color of text using opacity

Instead of using grey 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.

University of Illinois at Urbana-Champaign

- Text on colored backgrounds
- Using Text opacity
- Dark text on light backgrounds
- Colored text and backgrounds

Text Backgrounds

Material Design Documentation

Black text is recommended for use on light backgrounds, and white text on dark backgrounds. If your app has both light and dark themes, make sure the text is available in a contrasting color against each theme.

Colored backgrounds or typography additionally change the rules regarding text opacity and different states of text.

Text on colored backgrounds

Using text opacity

When using dark text on light backgrounds you should adhere to the following opacity levels (note the colors are shown as #000000 on #FFFFFF):
- High-emphasis text has an opacity of 87%
- Medium-emphasis text and hint text have opacities of 60%
- Disabled text has an opacity of 38%

Dark text on light backgrounds

Colored text should be used sparingly to draw attention and apply selective emphasis. Ideally colored text should be reserved for text elements such as headlines, buttons, and links. Be sure to check if the certain foreground colors used on text passes accessibility standards for background colors.

Learn Before

Related

Learn After