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

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.

Colored text and backgrounds

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

University of Illinois at Urbana-Champaign

Besides from text size, color also plays an important role in text legibility. Important things to consider are:
- Text backgrounds
- Text types

Learn Before

Related

Learn After