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

Text Backgrounds

Text Types

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

University of Illinois at Urbana-Champaign

Utilizing different colors and contrasts can help improve your user's ability to see, interpret, interact, and understand your app's contents. This is extremely helpful for those with low vision or colorblindness.

Color and Contrast

Material Design Documentation

Color is an important feature that helps communicate mood, tone, and critical information. Primary, secondary, and accent colors can be strategically selected to help support app usability. 

Accessible Color Options

Contrast ratios are used to represent how different one color is from another, commonly written as 1:1 or 21:1. According to the World Wide Web Consortium (W3C), the contrast ratio between a color and its background ranges from 1-21 based on its luminance or intensity of light emitted. The greater the difference in the two numbers, the greater difference in relative luminance between both colors.

Contrast Ratios

While color is a powerful tool, it's also good to incorporate other design elements to help express the same amount of information for those who cannot see differences in color. Elements such as strokes, indicators, patterns, texture, or additional text can help describe actions and content to communicate important states.

Learn Before

Related

Learn After

Learn After

Related