Colored text should be used sparingly to draw attention and apply selective emphasis. The ideally colored text should be reserved for text elements, such as headlines, buttons, and links.

Colored Text and Backgrounds

Dark text on light backgrounds (shown here as #000000 on #FFFFFF) applies the following opacity levels:

- 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

"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

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.

Using Text Opacity

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

Arizona State University

- Legibility Standards
- Text Backgrounds
- Text Types

Text Legibility Formats

Material Design Documentation

WCAG Standards:
All text should be legible and meet accessibility standards. "The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text, and 3:1 to large text."

Legibility Standards

Text Backgrounds

- Helper text
- Selected Text
- Icons and Other symbols

Learn Before

Related

Learn After