CodePen collection of accessible color, contrast, and motion examples that respect people’s system and in-page preferences.
- Accessible Color - Multiple media queries
- Reduced motion text drawing using SVGs
- Accessible Color - @prefers-contrast
- Accessible Color - @prefers-color-scheme
- Accessible Motion - @prefers-reduced-motion (motion default)
- Accessible Motion - @prefers-reduced-motion (no motion default)
- Light/Dark mode + reduced motion with SVGs (Karma Chameleon)
- Reduced motion border
- Accessible Motion - Accessible JavaScript motion toggle
- Accessible Motion - @prefers-reduced-motion + @prefers-reduced-data
- Accessible Contrast - @prefers-contrast + @prefers-reduced-transparency
- Accessible Color - @prefers-color-scheme + @forced-colors + @inverted-colors