prefers-reduced-transparency media query
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The prefers-reduced-transparency CSS media feature is used to detect if a user has enabled a setting on their device to reduce the transparent or translucent layer effects used on the device. Switching on such a setting can help improve contrast and readability for some users.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.at-rules.media.prefers-reduced-transparency Experimental | 118 | 118 | 113 | | 118 | |
http.headers.Sec-CH-Prefers-Reduced-Transparency Experimental The HTTP Sec-CH-Prefers-Reduced-Transparency request header is a user agent client hint that indicates the user agent's preference for reduced transparency. | 119 | 119 | | | 119 | |
- Requires an experimental browser flag to be enabled
Syntax
.overlay {
background: rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-transparency: reduce) {
.overlay {
background: rgb(30, 30, 30);
}
}Live demo
Use cases
-
Adaptive styling
Use prefers-reduced-transparency media query to tailor layout or presentation to device features and user settings.
-
Progressive enhancement
Keep the default experience solid, then layer in device-specific or preference-aware improvements.
Cautions
- Do not rely on a media condition as the only path to essential functionality.
- Document the breakpoint or environment strategy so conditions stay consistent across the codebase.
Accessibility
- Media-query adaptations should preserve keyboard access, reading order, and touch usability.
- Preference-aware styling should enhance accessibility rather than replace baseline accessible defaults.