Reduced motion is an operating system accessibility preference that asks software to minimize nonessential animation, and on the web it is exposed to pages through the CSS media feature prefers-reduced-motion. In web accessibility the term covers both the user setting and the design practice of honoring it: replacing parallax, zooming transitions, autoplaying motion and large animated movements with static or gentler alternatives.
The preference exists mainly for people with vestibular disorders, migraine, epilepsy-related sensitivities, attention difficulties or motion sickness, for whom large on-screen movement can cause dizziness, nausea, headaches or loss of focus. Respecting it does not mean removing all change from a page; it means that motion should never be required to understand or use the content.
How the prefers-reduced-motion media feature works
The browser reads the operating system setting and reports it through the media feature, which has two values: no-preference and reduce. Stylesheets query it with @media (prefers-reduced-motion: reduce), and scripts read it with window.matchMedia('(prefers-reduced-motion: reduce)'), optionally listening for change events when the user toggles the setting.
| Platform | Setting name | Reported value when enabled |
|---|---|---|
| macOS | Reduce motion | reduce |
| iOS and iPadOS | Reduce Motion | reduce |
| Windows | Animation effects turned off | reduce |
| Android | Remove animations | reduce |
| GNOME desktop | Animations turned off | reduce |
Developers can choose between two strategies. The subtractive approach writes animations normally and removes them inside a reduce query. The additive approach, often called motion-safe by default, adds animations only inside a no-preference query, so browsers that do not report the feature get the calmer experience.
Which motion should be reduced
Not all animation is equally problematic. The main triggers are large-scale movement, motion that covers a big part of the viewport, depth and scaling effects, and motion that is decoupled from the user’s own input, such as parallax layers moving at different speeds while scrolling.
| Motion type | Risk level | Reduced-motion alternative |
|---|---|---|
| Parallax scrolling | High | Static background or simple scroll |
| Zoom and slide page transitions | High | Cross-fade or instant change |
| Autoplaying video backgrounds | High | Poster image with optional play |
| Scroll-triggered fly-ins | Medium | Content visible without movement |
| Spinning or bouncing icons | Medium | Static icon or subtle opacity change |
| Small color or opacity fades | Low | Usually acceptable to keep |
| Focus and hover feedback | Low | Keep, but avoid large movement |
A common misunderstanding is that reduce means no animation at all. Removing every transition can make interfaces harder to follow, because state changes become abrupt. Short opacity or color transitions usually convey change without triggering vestibular symptoms and remain a sound default.
Reduced motion and accessibility guidelines
Several criteria of the Web Content Accessibility Guidelines (WCAG) address motion, and reduced motion support helps meet them. They differ in conformance level, which matters for legal and contractual requirements that usually target level AA.
| Criterion | Level | Requirement in brief |
|---|---|---|
| 2.2.2 Pause, stop, hide | A | Moving content lasting over 5 seconds can be paused |
| 2.3.1 Three flashes or below threshold | A | No content flashes more than three times per second |
| 2.3.3 Animation from interactions | AAA | Interaction-triggered motion can be disabled |
Reduced motion is related to, but distinct from, flashing content. Flashing poses a risk of seizures and must be avoided regardless of any preference, while reduced motion addresses movement-induced discomfort and is a matter of user choice. Honoring the media feature is the simplest practical way to satisfy criterion 2.3.3.
Implementing reduced motion well
Good implementations treat reduced motion as a design state, not as a last-minute CSS override. Designers specify the calm variant of each animated component alongside the default one, and developers wire both to the media feature.
- Apply the query to CSS transitions and keyframe animations, including those in third-party components.
- Check the preference in JavaScript animation code, including animation libraries and scroll-driven effects.
- Set smooth scrolling to auto for users who prefer reduced motion, since programmatic smooth scrolls can be disorienting.
- Replace autoplaying media with a still image and an explicit play control.
- Offer an in-page motion toggle on animation-heavy sites, because some users never change system settings.
A popular global reset sets animation and transition durations to near zero under the reduce query. It is a useful safety net, but it can break components that wait for animationend or transitionend events, so it should be tested rather than applied blindly.
The reduced variant also needs equivalent information. If an animation explains something, such as a chart growing to show a trend or an arrow moving to show where a panel went, the calm version must communicate the same idea with a static visual cue, a label or a brief highlight, so no user loses meaning when movement is removed.
Pitfalls and common mistakes
Most failures come from incomplete coverage: the stylesheet respects the preference, but carousels, canvas effects or marketing widgets ignore it.
- Forgetting JavaScript-driven motion that CSS media queries cannot reach.
- Hiding content that only appears through animation, leaving it invisible when animation is removed.
- Ignoring live changes to the preference during a session.
- Testing only with the setting off, so the reduced variant is never seen by the team.
- Treating the preference as a performance flag rather than an accessibility need.
Browser DevTools in Chromium, Firefox and Safari can emulate prefers-reduced-motion, which makes it practical to include the reduced variant in regular manual checks and in automated visual regression tests. Asking people who actually use the setting for feedback remains the most reliable validation, because sensitivity to specific effects varies considerably between individuals.
Put simply
For some people, moving images on a screen feel like reading in a car on a winding road: they can bring on dizziness, nausea or a headache. Phones and computers therefore have a setting that says, in effect, please keep the movement down.
Websites can read that setting and respond by calming things down: no sliding backgrounds, no zooming pages, no videos that start moving by themselves. Everything still works and all the information is still there, it simply arrives without the motion.
In practice
A travel booking site launches a redesigned home page with a full-screen parallax hero, destination cards that fly in as the user scrolls and a zooming transition into each search result. Within weeks, the support team receives messages from customers describing dizziness and nausea while browsing.
The front-end team adds a reduced-motion variant: under prefers-reduced-motion: reduce, the hero becomes a static photograph, the cards are visible immediately, the zoom transition is replaced by a 150 millisecond cross-fade, and smooth scrolling is turned off. They also add a pause control to the remaining promotional carousel. Customers who enabled the system setting now see a calm version of the same page, and the motion-related complaints stop.