prefers-reduced-transparency media query
The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.
Overview
The prefers-reduced-transparency CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
http.headers.Sec-CH-Prefers-Reduced-Transparency Experimental | 119 | 119 | | | 119 | |
| CSS at-rule | ||||||
prefers-reduced-transparency Experimental 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. | 118 | 118 | 113 | | 118 | |
- 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.
Related links
Powered by web-features