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

University of Illinois at Urbana-Champaign

Text Types

Material Design Documentation

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.

Learn Before

Related