Accessibility / 03

Motion + preferences.

Reads every standard prefers-* media query plus pointer / hover capabilities. Tells you what the OS has communicated to the browser about your accessibility setup.

Notes

These values feed CSS @media queries directly — they're how well-built sites adapt to your preferences without you touching anything.

How it works

We call matchMedia(query).matches for each preference query and report the result. The queries are the same ones CSS uses — meaning whatever this page reports will exactly match what your @media rules see.

Tested queries: prefers-reduced-motion, prefers-color-scheme (light / dark), prefers-contrast (more / less), prefers-reduced-transparency, prefers-reduced-data, inverted-colors, forced-colors, pointer (coarse / fine), any-hover.

Related
Contrast ratio
Audit the actual rendered foreground vs background.
Colour-blindness simulator
Preview your design through Protan / Deutan / Tritan filters.
Multi-touch test
Confirm 'pointer: coarse' detection matches your actual touchscreen.
Frequently asked

What is prefers-reduced-motion?

An OS-level setting that tells web pages to minimise animation. Users with vestibular disorders (motion sensitivity) or attention difficulties enable it system-wide; well-built sites then skip parallax, autoplay, and bouncing transitions in response. macOS: Settings → Accessibility → Display → Reduce motion. Windows: Settings → Accessibility → Visual effects → Animation effects.

Why is prefers-color-scheme useful?

Sites that respect it automatically match the user's OS-level dark/light preference. Users no longer need to hunt for a theme toggle — they set it once at the OS level and every well-behaved site complies.

What does 'pointer: coarse' mean?

The primary pointing device is a fingertip (touch screen). 'fine' = mouse / stylus. Responsive designs use this to enlarge tap targets, swap hover-only UI for tap-friendly alternatives, and skip mouse-precise interactions on touch.

What is forced-colors?

Windows High Contrast mode. When active, the OS overrides every site's colors with a small fixed palette. Sites need to test in this mode — many break because their text disappears against the forced background. Toggle on Windows: Settings → Accessibility → Contrast themes.

What does this tool actually test?

It reads every standard prefers-* CSS media query, plus pointer / hover / inverted-colors. The values come from the OS via the browser; we just enumerate them in one report.

Related tools in Accessibility
Colour-blindness
Protan, Deutan, Tritan simulators.
Contrast ratio
WCAG AA / AAA pass-fail check.