Helper text gives context about a field’s input, such as how the input will be used. It can adopt brand colors, but should be legible as determined by WCAG standards. For example, helper text on light backgrounds could use the following opacity levels and default hexes:
- High emphasis helper: This text uses a hex value #000000 at 87% opacity
- Default color helper text: This text uses a hex value of #000000 at 60% opacity
- Default error helper text: This text uses a hex value of #B00020 at 100% opacity

Helper Text

To reflect a brand, text selection can use an accent of your primary or secondary color.

Selected text should be legible against the selection color, and the selection color should contrast the background color. Alternatively, you can display outlines, motion, checkmark icons, or other text treatments to indicate selected text.

Selected Text

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

Text Legibility

Material Design Documentation

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

Learn Before

Related

Learn After

Learn After

Related