prefers-reduced-transparency

Limited availability

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

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 Preferences > 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

BCD tables only load in the browser