The prefers-reduced-transparency media feature can reflect a device preference to reduce translucent surfaces. Support is not universal, so the default component must already be readable. The query can improve a decorative overlay; it cannot replace contrast testing, and it does not imply that the user also requested reduced motion.
Make this comfortable
CSS prefers-reduced-transparency: keep overlays readable by default
When to use it
A document comparison panel floats above a scanned page. Its normal surface is a mostly opaque light color, with a mild backdrop blur added only as decoration when supported. When a reduced-transparency preference is reported, the panel becomes fully opaque and drops the blur. The text and buttons remain legible in the base state even if the media feature is unknown, the scan is unusually dark, or the browser turns the effect off. Test against several background pages, at high zoom, with system contrast settings, and in forced colors. Avoid a transparent panel whose readability depends on a single preference query; unsupported browsers would keep the weak default. Also avoid applying opacity to the whole panel, since that fades the text and controls along with the background. A solid background-color on the panel gives the browser a direct surface to paint. The feature is a progressive enhancement for user preference, not a reliable device classification.
.comparison-panel { color: #173441; background: #f5f8f9; border: 1px solid #7b929d; }
@supports (backdrop-filter: blur(1px)) { .comparison-panel { background: rgb(245 248 249 / 94%); backdrop-filter: blur(6px); } }
@media (prefers-reduced-transparency: reduce) { .comparison-panel { background: #f5f8f9; backdrop-filter: none; } }Cost and verification
Backdrop blur can add compositing work over a large moving surface; measure it on representative devices if the panel covers much of the viewport. A solid panel avoids that work. The media query has limited availability, so the base color and border must do the accessibility work. Check the final foreground-to-background contrast over the most demanding page image rather than averaging the scan. Forced-colors mode may substitute system colors; leave the underlying text and controls functional when authored backgrounds disappear. Keep any separate reduced-motion handling independent, since transparency and motion preferences express different needs.
Common Mistakes
- Do not make a low-contrast default depend on this limited-support query.
- Do not lower opacity on a whole panel containing text.
- Do not assume reduced transparency also means reduced motion.
Connected lessons
css
reference
web