Accessibility
Contrast is part of the identity. Decoration never outranks readability, keyboard access or a clear next step.
Measure the contrast
WCAG AA normal text needs at least 4.5:1; large text needs 3:1. Compare the unrounded value. A displayed rounded ratio is not a pass decision. W3C · WCAG 2.2
In practice
Meets body-text contrast
WCAG AA normal text needs at least 4.5:1; large text needs 3:1. Compare the unrounded value. A displayed rounded ratio is not a pass decision.
Use Tab to move between buttons and Enter or Space to activate them. Keep the focus outline visible.
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Place detailed copy on a quiet background. The dense version shows a layout to avoid.
Place detailed copy on a quiet background. The dense version shows a layout to avoid.
Make the same idea usable
Meets body-text contrast
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Place detailed copy on a quiet background. The dense version shows a layout to avoid.
The text control resizes this sample only. Play the motion when you want to compare it; your system's reduced-motion setting takes priority.
Rules and source
Readable by default
Use at least 16px body text and 14px labels. Choose Navy on light brand surfaces or White on Navy; never rely on color alone.
Useful without motion
Preserve focus visibility, semantic labels and logical reading order. At 200% text size, content reflows. Reduced motion retains the same information.
Do
Pair state with text and keep every control reachable by keyboard.
Don’t
Do not hide key guidance in hover-only effects or clipped text.
Open editable Figma sourceSource pages 31