Motion should explain change
A short transition can preserve continuity when a panel opens or content changes. Continuous decoration and large movement rarely help the task. Respect reduced-motion preferences by removing or simplifying nonessential movement.
Contrast keeps content distinguishable
Text, icons, focus rings, and control boundaries need enough contrast against their background. Do not use color alone for selected, success, warning, or error states; pair it with text, shape, or iconography.
A familiar example
Showing a selected term
- The selected chip changes its border and background.
- aria-pressed exposes the same state without relying on color.
- The definition updates immediately without a large animated movement.
What to remember
- Use motion to preserve understanding, not decorate every change.
- Respect reduced-motion preferences.
- Pair color with another truthful state signal.