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

> Master prefers-reduced-motion and prefers-reduced-transparency with CSS media queries. Enhance accessibility by respecting user preferences and reducing motion and transparency.

- Repository: [Emil Kowalski/skills](https://github.com/emilkowalski/skills)
- Tags: how-to-guide
- Published: 2026-08-05

---

**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`](https://github.com/emilkowalski/skills/blob/main/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**.

```css
/* 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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) file recommends replacing "frostier" surfaces with solid, higher-opacity alternatives:

```css
/* 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:

```css
.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`](https://github.com/emilkowalski/skills/blob/main/skills/review-animations/STANDARDS.md) | Repository-wide standards for reduced-motion handling |
| [`skills/prototype/PICKER.md`](https://github.com/emilkowalski/skills/blob/main/skills/prototype/PICKER.md) | Concrete component implementation with `prefers-reduced-motion` |
| [`skills/apple-design/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md) | Design guidance for both reduced motion and reduced transparency |
| [`skills/emil-design-eng/SKILL.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/STANDARDS.md), [`PICKER.md`](https://github.com/emilkowalski/skills/blob/main/PICKER.md), and [`APPLE-DESIGN.md`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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`](https://github.com/emilkowalski/skills/blob/main/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.