Accessibility Tools prefers media-queries a11y

Accessibility Preferences

Overview of prefers-* and related accessibility media features.

Interactive tool

Run the test

Runs in your browser

Overview of accessibility-related CSS media features via matchMedia. For color vision simulations, see the Color Blindness Test at /color-blindness-test.

prefers-contrast explained

more often maps to OS higher-contrast or Windows/macOS contrast enhancements. less is uncommon in consumer defaults. custom can appear with platform-specific contrast themes (for example Windows Contrast themes). Engine support varies. This is not a clinical diagnosis.

Reading preferences…

Checking accessibility media features…

Permission status

Checked in your browser. DeviceHub does not store permission grants.

  • Special permission Not required

Live results

Metrics update as you run the test. Nothing is uploaded.

Loading

Waiting for interactive tool output…

Device information

Labels and capability details reported by your browser.

No device details yet.

Description

About Accessibility Preferences

Introduction

Accessibility Preferences summarizes browser-visible prefers-* and related media features (reduced motion, color scheme, contrast, forced colors, and more). It is environment context for developers and QA, not a medical report or a full WCAG audit.

What this tool does

It queries matchMedia for supported accessibility media features, explains prefer-contrast in plain language, and links to focused tools for motion, scheme, forced colors, contrast math, keyboard focus, and speech. Unsupported rows stay labeled unsupported.

When to use it

Start here when a bug needs OS/browser preference context, or when choosing which specialized a11y tool to open next. Use Color Contrast Checker for hex contrast math and professional auditors (axe, WAVE) for site conformance.

How it works

CSS media features such as prefers-reduced-motion, prefers-color-scheme, prefers-contrast, and forced-colors are read locally. Engines and OS versions differ. Many assistive technologies never appear as CSS prefers-* rows. Permissions stay none.

Step-by-step instructions

  1. Open Accessibility Preferences on the browser profile under test.
  2. Note each reported preference with browser and OS names.
  3. Open a dedicated tool when you need a live preview or contrast calculation.
  4. Label the capture as informational media signals, not a clinical or compliance certificate.

Common problems

Unsupported rows are platform limits. Browser overrides can disagree with OS labels. Hub screenshots are not WAVE replacements and are not medical evidence.

Privacy explanation

Media features display locally. DeviceHub does not build a health record from these signals. Some preference screenshots can feel sensitive; share on a need-to-know basis.

Runtime principles

Built for the browser

What happens when you run this test — without downloads or accounts.

  1. 01

    Runs in your browser

    Accessibility Preferences uses standard web APIs — no install, extension, or desktop app required.

  2. 02

    Reads what the browser allows

    Results come from events and capability signals the web platform exposes for this session.

  3. 03

    Private by default

    Input and diagnostic values stay in your browser session for display — nothing is sold as media.

Compatibility

Supported browsers

Expected support for modern engines. Individual APIs may still vary by device.

  • Chrome

    supported

    Latest stable

  • Firefox

    supported

    Latest stable

  • Safari

    supported

    Latest stable

  • Edge

    supported

    Latest stable

Devices

Supported devices

Hardware and form factors this browser test is designed to exercise.

  • Any modern browser

    Color and contrast patterns render as ordinary web content.

  • Desktop & mobile screens

    Full-viewport patterns work across devices.

  • Assistive tech users

    Tools remain keyboard reachable and labeled.

Privacy

Your data stays with you

Accessibility Preferences is built privacy-first. Diagnostics run in your browser session whenever web APIs allow.

Read our privacy policy

Troubleshooting

Common problems

Quick fixes before you dig into FAQs.

Some rows say unsupported
Engines expose different prefers-* features. Unsupported is valid capability evidence, open the dedicated tool (for example Forced Colors Test) on a platform that supports it.
Values disagree with OS labels
Browser overrides and incomplete mappings exist. Capture browser name beside each row and retest after disabling appearance extensions.
Is this a medical report?
No. The hub summarizes browser-visible accessibility media features for information only, not clinical diagnosis and not a full WAVE/axe audit.

FAQ

Frequently asked questions

Structured answers for users and FAQ rich results.

Browse FAQs
Is this a medical or clinical report?
No. It summarizes browser-visible accessibility media features for information only.
What is prefers-contrast?
A CSS media feature that reflects a user preference for more or less contrast when the OS and browser expose it. Unsupported on some engines.
Does this replace WAVE or axe?
No. Use professional auditors for page conformance. This hub is environment context.
Why are some rows unsupported?
Engines expose different prefers-* features. Unsupported is valid evidence for that browser.
Is anything uploaded?
No. Media features are read and shown locally. Permissions stay none.

Newsletter

Updates coming soon

A lightweight email digest for new tools and release notes is planned. No signup form is live yet — check Release Notes for product updates.

Release notes

Need another diagnostic after Accessibility Preferences?

Explore related DeviceHub tools that pair well with this test.