Most people who change their system preferences did it for a reason. Someone who turns on dark mode at 11 p.m. is not making a fashion statement. Someone who enables reduced motion may get physically sick from sliding animations. And someone using high contrast mode often cannot read your site without it.
CSS media queries like prefers-color-scheme, prefers-reduced-motion, prefers-contrast, and forced-colors exist so your site can listen to those signals. The problem is that most sites never check whether they actually respond to them.
What a user preferences audit catches
A preferences audit scans your stylesheets and inline styles for the media queries that matter:
- prefers-color-scheme checks whether you offer a dark or light theme that follows the operating system setting. Without it, your bright white page blinds the person who set their entire laptop to dark mode.
- prefers-reduced-motion checks whether you disable or soften animations for users who requested it. Parallax scrolling, auto-playing carousels, and bouncing elements can trigger vestibular disorders in real people.
- prefers-contrast checks whether you adjust colors when a user requests more or less contrast. This matters for low-vision users who need sharper boundaries between text and background.
- forced-colors checks whether your layout holds up when the browser overrides your palette entirely, as Windows High Contrast Mode does.
Missing any of these is not just a design gap. It is an accessibility failure that affects real visitors right now.
Why ignoring system preferences costs you visitors
People who use accessibility features tend to be loyal to sites that respect them. They also tend to leave sites that do not. If your animations make someone nauseous, they are not going to push through and buy your product. They are going to close the tab and find a competitor whose site does not make them feel ill.
Search engines are also paying more attention to accessibility signals. Google's Lighthouse audits flag missing prefers-reduced-motion support. Core Web Vitals penalize layout shifts caused by animations that should have been suppressed. A site that ignores user preferences is a site that works harder to rank for the same keywords.
Beyond search, there is a legal dimension. WCAG 2.1 Success Criterion 2.3.3 addresses animation from interactions, and courts have increasingly treated WCAG conformance as relevant in ADA lawsuits. Respecting motion preferences is cheap insurance against complaints you do not want to deal with.
What good preference support looks like
The implementation is not complicated. A dark mode query is a few lines of CSS:
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e0e0e0;
}
}
Reduced motion support is even simpler. Wrap your animations in a query that only runs them when the user has not asked you to stop:
@media (prefers-reduced-motion: no-preference) {
.hero { animation: fadeIn 0.5s ease-in; }
}
The key shift is treating motion as opt-in rather than opt-out. Instead of animating everything and then removing animations for people who complain, animate nothing by default and add motion only when the system says the user is fine with it.
For forced-colors mode, test that your buttons, links, and form fields remain visible when the browser strips your color palette. Windows High Contrast Mode is more common than most developers realize, especially in enterprise environments where IT departments enable it fleet-wide.
Running the audit on your own site
The User Preferences Audit tool scans your published CSS for all four media queries. It tells you which ones you support, which ones you are missing, and gives you copy-paste code to fill the gaps.
Run it before your next deploy. The fixes take minutes. The impact on the people who need them is immediate.
If you are building a site for a business and want to understand how accessibility intersects with conversion strategy, the Digital Empire Series covers the practical side of making sites that work for everyone, not just the default user.
Fact-check notes and sources
- WCAG 2.1 Success Criterion 2.3.3 (Animation from Interactions) is a AAA criterion. SC 2.3.1 (Three Flashes or Below Threshold) is Level A. Both are relevant to motion sensitivity.
prefers-reduced-motionhas been supported in all major browsers since 2019 (Safari 10.1, Chrome 74, Firefox 63).forced-colorsis a W3C CSS Media Queries Level 5 feature, primarily relevant for Windows High Contrast Mode.- Google Lighthouse flags missing
prefers-reduced-motionin its accessibility audit category.
Related reading
- Subresource Integrity Audit — another layer of front-end hardening
- Service Worker Audit — offline-first patterns that pair well with theme preferences
- Speculation Rules Audit — modern browser APIs that improve perceived performance
This post is provided for informational purposes. Always test accessibility changes with actual assistive technology users before assuming compliance.
