Prefers-Reduced-Motion Switcher

prefers-reduced-motion is a CSS media feature and a user preference setting that allows websites to detect whether the user has requested minimal non-essential motion on their device. It was introduced as part of the Media Queries Level 5 specification and is widely supported across all modern browsers. When a user enables "Reduce Motion" in their operating system accessibility settings, websites can respond by disabling or minimizing animations, transitions, and parallax effects.

Excessive motion on screen can cause vestibular disorders, dizziness, nausea, and even seizures in susceptible individuals. An estimated 35% of adults experience some form of vestibular dysfunction at some point in their lives. By respecting the prefers-reduced-motion setting, developers create inclusive experiences that do not physically harm users who are sensitive to motion. It is a core requirement of WCAG 2.2 Success Criterion 2.3.3 (Animation from Interactions).

Developers can use the CSS media query @media (prefers-reduced-motion: reduce) { ... } to wrap or override animation styles. In JavaScript, use window.matchMedia('(prefers-reduced-motion: reduce)').matches to conditionally trigger animations. Best practice is to design animations progressively: start with static designs, then add motion as an enhancement for users who have not opted out. Always ensure that no critical content or functionality depends on motion.

Should be reduced/removed: Large-scale movements (sliding, bouncing), continuous spinning or rotating elements, auto-playing video backgrounds, parallax scrolling effects, infinite looping animations, and rapid flashing content.

Generally safe to keep: Opacity fades, color transitions, subtle border changes, and CSS transitions with a duration under 100ms. The key principle: if motion conveys no essential information and could cause discomfort, remove or minimize it.

Yes. WCAG 2.2 Success Criterion 2.3.3 (Animation from Interactions) requires that motion animation triggered by interaction can be disabled unless the animation is essential to the functionality or the information being conveyed. Additionally, SC 2.2.2 (Pause, Stop, Hide) addresses auto-playing animations. Respecting prefers-reduced-motion is the recommended technique to meet these criteria and ensure Level AA or AAA compliance.

Studies and browser telemetry suggest that approximately 2–5% of desktop users and a similar percentage of mobile users have the reduced motion setting enabled. While this may seem small, it represents millions of people globally. Furthermore, many users are unaware this setting exists, so the actual number of people who would benefit is likely higher. Implementing support is a straightforward way to make a meaningful difference for a significant number of users.

no-preference (default): The user has not indicated any preference regarding motion. Websites are free to display animations as designed.

reduce: The user has explicitly requested that non-essential motion be minimized. Websites should remove, pause, or significantly tone down animations. The only valid values are no-preference and reduce — there is no prefers-more-motion or similar option.