Sec-CH-Prefers-Reduced-Transparency

Sec-CH-Prefers-Reduced-Transparency mirrors the OS-level “reduce transparency” accessibility setting, the one that turns macOS’s frosted-glass menus solid. Some users need it because text over translucent layers is genuinely harder to read.

Accept-CH: Sec-CH-Prefers-Reduced-Transparency

Sec-CH-Prefers-Reduced-Transparency: reduce
Sec-CH-Prefers-Reduced-Transparency: no-preference

Token values, unquoted: no-preference or reduce.

Honest assessment: the niche of the niche

This is the least-requested hint in the registry, and that’s fine. If your design uses backdrop-filter glassmorphism decided in CSS, the media query alone solves it. The header matters only when the server chooses between markup variants, say an acrylic-styled component library where the opaque variant ships different CSS altogether.

It is also the youngest preference hint (Chrome 114, 2023) and MDN still flags it experimental. The pattern to follow is identical to its siblings:

• Sec-CH-Prefers-Color-Scheme for theme
• Sec-CH-Prefers-Reduced-Motion for animation
• this header for translucency

In JavaScript

const solid = matchMedia('(prefers-reduced-transparency: reduce)').matches;

The media query itself is broadly available (Chrome 118+, Firefox, Safari 16+ behind the OS setting), so progressive enhancement in CSS remains the primary tool:

.panel {
  backdrop-filter: blur(14px);
  background: rgb(255 255 255 / 0.6);
}
@media (prefers-reduced-transparency: reduce) {
  .panel {
    backdrop-filter: none;
    background: rgb(255 255 255);
  }
}

Request the header only once you have a concrete server-rendered use for it.