Prefers Reduced Transparency
@media (prefers-reduced-transparency: reduce) replaces frosted glass effects and semi-transparent overlays with solid alternatives when users enable the OS-level reduced transparency setting.
Quick implementation
/* Default: glassmorphism card */
.glass-card {
background: oklch(0.19 0.02 260 / 0.55); /* semi-transparent */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid oklch(1 0 0 / 0.1);
border-radius: 0.75rem;
padding: 1.5rem;
}
/* Solid fallback for reduced transparency */
@media (prefers-reduced-transparency: reduce) {
.glass-card {
background: oklch(0.19 0.02 260); /* same color, fully opaque */
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-color: oklch(1 0 0 / 0.15);
}
}
/* Also handle semi-transparent overlays, tooltips, modals */
.tooltip {
background: oklch(0.10 0.01 260 / 0.80);
backdrop-filter: blur(8px);
}
@media (prefers-reduced-transparency: reduce) {
.tooltip {
background: oklch(0.12 0.01 260); /* fully opaque dark */
backdrop-filter: none;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are an accessibility-focused CSS developer. Implement prefers-reduced-transparency support for glassmorphism UI components.
Requirements:
1. Write default CSS for a .glass-card with semi-transparent background (oklch with alpha < 1) and backdrop-filter: blur().
2. Add @media (prefers-reduced-transparency: reduce) that replaces the transparent background with a solid equivalent and removes backdrop-filter entirely.
3. Apply the same pattern to a .modal-overlay, a .tooltip, and a .nav-header (sticky header with blur).
4. Explain when this setting fires: macOS → Accessibility → Reduce Transparency; iOS → Accessibility → Motion → Reduce Transparency. Note: as of 2026, Safari on macOS/iOS supports this; Chrome/Edge support is partial — always provide a solid fallback in the default styles as well so the UI is usable even without the media query.
5. Show how to use @supports (backdrop-filter: blur(1px)) combined with prefers-reduced-transparency for a clean progressive enhancement approach.
Constraints:
- The solid replacement color should be the same hue as the transparent color at opacity 1 — do not substitute a completely different color.
- backdrop-filter has significant GPU cost on mobile — the reduced-transparency override also serves as a performance benefit.
- Do NOT use -webkit-backdrop-filter as the only declaration — always include the unprefixed version as well.
Output CSS demonstrating all four components with their reduced-transparency overrides.Why this matters in 2026
Glassmorphism — frosted-glass cards with backdrop-filter: blur() — is a popular design trend that can create genuine accessibility problems. Semi-transparent backgrounds let the content behind bleed through, reducing effective contrast. For users with low vision, cognitive disabilities, or sensitivity to visual noise, this background bleed makes text significantly harder to read. The macOS and iOS "Reduce Transparency" accessibility setting is the user's explicit signal that they need solid backgrounds — and @media (prefers-reduced-transparency) is how CSS respects it.
The logic
The override strategy is simple: keep the same hue but remove the alpha channel (set opacity to 1) and remove backdrop-filter. The card still looks visually consistent with the design — same color family — but now has a guaranteed solid background with predictable contrast. Browser support as of 2026 is strong in Safari (macOS and iOS) and growing in Chromium; always provide a solid fallback in the base styles as a progressive enhancement rather than relying entirely on the media query. A useful pairing: @supports (backdrop-filter: blur(1px)) guards the blur itself, while prefers-reduced-transparency guards the transparency.
Accessibility & performance
Removing backdrop-filter: blur() has a meaningful performance benefit — blur compositing creates a new GPU layer and is computationally expensive on mobile devices. Respecting this preference therefore benefits both accessibility and battery life. Combined with prefers-reduced-motion, these two media queries let you build high-performance, accessible UI that adapts gracefully to the widest possible range of user needs and device capabilities.