prefers-reduced-transparency media queryLimited availability
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.
Not yet supported in all major browsers — check the table and provide a fallback.
Browser support
DesktopChrome
1–118Not supported
119+Supportedsince Oct 31, 2023
Current: 155Edge
12–118Not supported
119+Supportedsince Nov 2, 2023
Current: 154Firefox
✕Not supportedup to 157
Current: 157Safari
✕Not supportedup to 27
Current: 27MobileChrome Android
18–118Not supported
119+Supportedsince Oct 31, 2023
Current: 155Firefox Android
✕Not supportedup to 157
Current: 157Safari iOS
✕Not supportedup to 27
Current: 27How to use
Not supported in Firefox, Safari, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.
Example
Full syntax and examples are on MDN: prefers-reduced-transparency.
Feature detection
There’s no simple runtime check for this feature; rely on the support table and test in your target browsers.
Documentation (MDN)
Specification
Sub-features
Support for each part of the feature (2). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| @media.prefers-reduced-transparency | 118 | 118 | ✕ | ✕ | 118 | ✕ | ✕ |
| http.headers.Sec-CH-Prefers-Reduced-Transparency | 119 | 119 | ✕ | ✕ | 119 | ✕ | ✕ |