Last Updated: November 21, 2025
Contrast Rules
| Element | Contrast |
|---|---|
Text
|
4.5:1 |
Large text
|
3:1 |
Graphic
|
3:1 |
Focus Styles
:focus-visible
Add visible ring
outline: 3px solid
Ensure at least 3px
box-shadow
Soft highlights
Motion
Honor prefers-reduced-motion by disabling animations or filtering them.
💡 Pro Tip:
Prioritize color contrast, ensure visible focus states, and respect reduced-motion preferences.