How to Handle `prefers-reduced-motion` and `prefers-reduced-transparency` for Accessibility

Use CSS media queries @media (prefers-reduced-motion: reduce) and @media (prefers-reduced-transparency: reduce) to wrap motion-heavy and translucent styles, providing fallback rules that respect user system preferences.

Modern browsers expose two critical CSS media features that let you adapt visual effects for users with vestibular disorders or vision-related sensitivities. The emilkowalski/skills repository demonstrates production-ready patterns for implementing both features, ensuring your interfaces remain usable and comfortable for everyone.

What prefers-reduced-motion and prefers-reduced-transparency Accomplish

Media feature	User need	Typical adaptation
prefers-reduced-motion: reduce	Sensitivity to animation (vestibular disorders, motion sickness)	Disable or simplify transitions, keyframe animations, and spring-based motion; preserve non-motion feedback like color or opacity changes
prefers-reduced-transparency: reduce	Difficulty reading through translucent layers	Increase background opacity, remove blur filters, replace frosted-glass effects with solid fills

Both features respond to system-level settings—for example, macOS Reduce Motion and Reduce Transparency in Accessibility preferences, or Windows Show animations toggle.

Repository Patterns for Reduced Motion

The skills/review-animations/STANDARDS.md file establishes the canonical pattern for handling prefers-reduced-motion across the codebase. The standard approach preserves state-conveying changes (color, opacity) while eliminating positional or transform motion.

/* Base: full animation for users without preference */
.button {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Reduced motion: drop transform, keep color feedback */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: background-color 0.3s ease, opacity 0.3s ease;
    animation: none;
  }
}

The skills/prototype/PICKER.md demonstrates this in a concrete component, gating hover animations behind the media query so pickers remain functional without causing discomfort.

Repository Patterns for Reduced Transparency

For prefers-reduced-transparency, the skills/apple-design/SKILL.md file recommends replacing "frostier" surfaces with solid, higher-opacity alternatives:

/* Base: glass-morphism effect */
.card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
}

/* Reduced transparency: solid, readable surface */
@media (prefers-reduced-transparency: reduce) {
  .card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: none;
  }
}

This maintains visual hierarchy and contrast while eliminating the translucency that can cause readability issues or visual fatigue.

Combined Implementation Example

Complex components often need both media queries. The following pattern from the repository shows a modal handling both preferences independently:

.modal {
  animation: slideIn 0.5s ease-out;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

/* Handle reduced motion */
@media (prefers-reduced-motion: reduce) {
  .modal {
    animation: none;
  }
}

/* Handle reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .modal {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: none;
  }
}

Note that these queries are separate and additive—a user may have one, both, or neither preference enabled.

Key Files in the Repository

File	Purpose
skills/review-animations/STANDARDS.md	Repository-wide standards for reduced-motion handling
skills/prototype/PICKER.md	Concrete component implementation with prefers-reduced-motion
skills/apple-design/SKILL.md	Design guidance for both reduced motion and reduced transparency
skills/emil-design-eng/SKILL.md	Engineering patterns dedicated to prefers-reduced-motion

Testing Your Implementation

To verify your prefers-reduced-motion and prefers-reduced-transparency handling:

1. Enable system preferences—macOS: System Settings → Accessibility → Display → Reduce Motion / Reduce Transparency; Windows: Settings → Accessibility → Visual effects → Animation effects / Transparency effects

2. Use DevTools emulation—Chrome DevTools → Rendering tab → Emulate CSS media feature prefers-reduced-motion: reduce and prefers-reduced-transparency: reduce

3. Check that animations stop, transforms cease, blur filters disappear, and opaque backgrounds replace translucent ones

Summary

• prefers-reduced-motion: reduce eliminates or simplifies animation while preserving color and opacity state changes

• prefers-reduced-transparency: reduce replaces translucent, blurred surfaces with solid, higher-opacity alternatives

• The emilkowalski/skills repository implements both through standalone @media blocks in STANDARDS.md, PICKER.md, and APPLE-DESIGN.md

• Always test with system preferences or DevTools emulation to ensure fallbacks activate correctly

Frequently Asked Questions

Do I need to support both media queries, or is reduced motion enough?

Support both. They address different user needs—someone may tolerate motion but struggle with transparency, or vice versa. The repository treats them as independent concerns with separate fallback blocks.

Should I use transition: none or just remove specific properties?

Remove specific properties. The STANDARDS.md guideline emphasizes keeping background-color and opacity transitions intact because they convey state change without triggering vestibular issues. Use animation: none to stop keyframe animations.

Does prefers-reduced-transparency affect all rgba() colors?

Only those that create layered, depth-indicating effects like frosted glass. Solid UI elements with minor transparency for subtlety typically don't need adjustment. The APPLE-DESIGN.md guidance targets backdrop-filter and low-opacity background layers specifically.

Are these media queries widely supported?

prefers-reduced-motion has excellent support in all modern browsers since 2019. prefers-reduced-transparency is newer—Safari 16.4+, Chrome 118+, Firefox 125+—but degrades gracefully; users on unsupported browsers simply see the default styles.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}