User Preference Respect

The operating system already knows what the user needs. Your job is to listen and respond. These preferences exist because people set them deliberately — ignoring them overrides the user's own accessibility decision.

The Preferences

prefers-reduced-motion

What it means: user experiences discomfort or harm from motion. What to do:

• Disable all decorative animation
• Replace slide/fade transitions with instant state changes
• Keep essential motion (loading spinners) but simplify
• Disable parallax, scroll-triggered animation, and auto-advance
• Never override this preference

How to detect: @media (prefers-reduced-motion: reduce)

prefers-contrast

What it means: user needs stronger visual distinction. What to do:

• Increase contrast beyond WCAG minimums
• Replace subtle shadows and gradients with solid borders
• Make focus indicators bolder and more visible
• Remove transparency and blur effects
• Increase border widths on interactive elements

How to detect: @media (prefers-contrast: more)

prefers-color-scheme

What it means: user prefers light or dark interface. What to do:

• Provide genuine dark mode (not just inverted colours)
• Ensure all content is legible in both modes
• Test images, charts, icons, and illustrations in both
• Don't use pure black (#000) on dark mode — use dark grey (#1a1a1a) for less eye strain
• Remember: dark mode is not just aesthetic — it reduces eye fatigue and helps some people with light sensitivity

How to detect: @media (prefers-color-scheme: dark)

forced-colors

What it means: user has enabled Windows High Contrast or similar. What to do:

• Don't fight the system colour override
• Ensure borders and outlines define interactive elements (the system will strip your colours)
• Use transparent borders that become visible in forced-colors mode
• Test that all interactive elements remain distinguishable
• Don't rely on background colour alone to indicate state

How to detect: @media (forced-colors: active)

prefers-reduced-transparency

What it means: user finds transparent elements hard to read. What to do:

• Replace semi-transparent backgrounds with solid ones
• Remove frosted glass / backdrop blur effects
• Ensure overlays are fully opaque

How to detect: @media (prefers-reduced-transparency: reduce)

Implementation Principles

Progressive Enhancement

• Build the accessible version first
• Add motion, transparency, and visual flourishes as enhancements
• When a preference is detected, you're removing the enhancement, not degrading the experience

Don't Ask — Detect

• Don't make users configure accessibility settings in your app when the OS already has the setting
• Detect and respond automatically
• If you offer additional settings, they should layer on top of system preferences, not replace them

Test Every Preference

• Test with each preference enabled individually
• Test with combinations (reduced motion + high contrast + dark mode)
• Verify that the interface is complete and usable in every state
• Automated tests can check that media queries exist — manual testing verifies they work

Assessment Checklist

• prefers-reduced-motion is detected and all decorative motion stops
• prefers-contrast is detected and visual contrast increases
• prefers-color-scheme is detected and theme switches
• forced-colors mode doesn't break interactive elements
• Combinations of preferences work together
• No preference is overridden or ignored