Browser Accessibility Settings Detector
Detect your browser's accessibility preferences: reduced motion, contrast, transparency and more.
How to use this tool
- Open this page — it runs instantly in your browser, no signup or install.
- Allow any permission prompt if asked; everything stays on your device.
- Use the on-screen controls — results update live.
Detect your browser's accessibility preferences: reduced motion, contrast, transparency and more.
How it works
The Browser Accessibility Settings Detector reads CSS media features and browser APIs that expose the user's accessibility preferences and displays them on a single dashboard. It checks prefers-reduced-motion (animations), prefers-contrast (high contrast mode), prefers-color-scheme (dark or light mode), prefers-reduced-transparency, and forced-colors (Windows High Contrast mode).
These preferences are set in the operating system's accessibility or display settings and are forwarded to web pages via CSS media queries and JavaScript's window.matchMedia(). Websites and web apps that respect them adjust their appearance and behaviour accordingly — disabling animations, increasing contrast, or switching colour palettes.
Use this tool to verify that your OS accessibility settings are being correctly detected by the browser, to check what a web developer would see when they query your preferences, and to understand which CSS media features your browser supports.
All detection runs locally in your browser using standard browser APIs with no data sent anywhere.
Worked example
Verify that prefers-reduced-motion is active after enabling it in OS settings
- Enable Reduce Motion in your OS settings (macOS: System Settings > Accessibility > Motion; Windows: Settings > Ease of Access > Display > Show animations).
- Open the Accessibility Settings Detector.
- Check that prefers-reduced-motion shows as 'reduce'.
- If it still shows 'no-preference', try restarting the browser.
- Reload the page to confirm the setting is detected.
Confirmed the browser is reporting the reduced-motion preference, meaning CSS animations on websites that respect this setting will be disabled.
Common mistakes to avoid
- Changing an OS accessibility setting and expecting the browser to reflect it immediately without a browser restart — some browsers cache these values at startup.
- Assuming this detector can tell you whether a specific website respects your accessibility preferences — it only shows what your browser reports, not how any given site responds.
- Confusing prefers-contrast with forced-colors — prefers-contrast is a user preference for higher contrast while forced-colors indicates Windows is actively overriding page colours.
Key terms
- prefers-reduced-motion
- A CSS media feature that reflects the user's OS setting to reduce or eliminate non-essential animations and transitions.
- prefers-color-scheme
- A CSS media feature indicating whether the user prefers a light or dark colour theme, driven by the OS appearance setting.
- forced-colors
- A CSS media feature indicating that Windows High Contrast mode is active, where the OS overrides the page's colours with a limited high-contrast palette.
Frequently asked questions
- What does prefers-reduced-motion mean?
- It means the user has requested in their OS settings that animations be minimised or eliminated. Good websites respect this to help people with vestibular disorders.
- What is forced-colors?
- Forced colors (Windows High Contrast Mode or similar) overrides website colors with a restricted palette chosen by the user for visibility.