prefers-reduced-transparency

{{CSSRef}} {{SeeCompatTable}}

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

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

CSS

.translucent {
  opacity: 0.4;
}

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror