`prefers-reduced-transparency` CSS media feature

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

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.

Syntax

no-preference: Indicates that a user has made no preference known on the device. This keyword value evaluates as false in the boolean context.
reduce: Indicates that a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects.

User preferences

Various operating systems provide a preference for reducing transparency, and user agents are likely to rely on these system settings. They may also rely on less explicit signals on platforms which don't offer a specific setting.

In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
In macOS: System Settings > Accessibility > Display > Reduce transparency.
In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.

Examples

This example has a translucent box by default. If the setting to reduce transparency is enabled in the accessibility preferences on your device, the translucent box becomes more opaque.

HTML

html

<div class="translucent">translucent box</div>

CSS

css

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Specifications

Specification
Media Queries Level 5 # prefers-reduced-transparency

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`prefers-reduced-transparency` media feature Experimental	Chrome – Full support Chrome 118 (Release date: 2023-10-10) footnote Full support	Edge – Full support Edge 118 (Release date: 2023-10-13) footnote Full support	Firefox – No support Firefox 113 (Release date: 2023-05-09) footnote , disabled disabled From version 113 users must explicitly set the `layout.css.prefers-reduced-transparency.enabled` preference to `true`. To change preferences in Firefox, visit about:config. footnote See bug 1822176	Opera – Full support Opera 104 (Release date: 2023-10-23) footnote Full support	Safari – No support Safari footnote footnote See bug 175497	Chrome Android – Full support Chrome Android 118 (Release date: 2023-10-10) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 79 (Release date: 2023-12-06) footnote Full support	Safari on iOS – No support Safari on iOS footnote footnote See bug 175497	Samsung Internet – Full support Samsung Internet 25 (Release date: 2024-04-24) footnote Full support	WebView Android – Full support WebView Android 118 (Release date: 2023-10-10) footnote Full support	WebView on iOS – No support WebView on iOS footnote footnote See bug 175497

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.
: See implementation notes.
: User must explicitly enable this feature.

prefers-reduced-transparency CSS media feature

Legend

`prefers-reduced-transparency` CSS media feature