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.


Helper Text

To reflect 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

Icons and other elements don’t need to meet WCAG legibility standards, but should be as visible as possible to indicate function or communicate information.

Icons and Other Symbols

- Helper text
- Selected Text
- Icons and Other symbols

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 on colored backgrounds
- Using text opacity
- Dark text on light backgrounds
- Colored text and backgrounds

Learn Before

Related

Learn After