Honour Reduced Transparency and Increased Contrast
MUST: Honour the two OS preferences that govern translucency, not just `prefers-reduced-motion`: under `prefers-reduced-transparency: reduce` drop `backdrop-filter` to `none` and raise the background to a solid token; under `prefers-contrast: more` go near-solid and add a defined, contrasting border so the chrome still reads as a separate layer once the blur that did that job is gone. A `backdrop-filter` toolbar's effective text contrast is whatever happens to be scrolling under it — unmeasurable, and unreadable for a low-vision user.
Translucent chrome must go solid under prefers-reduced-transparency and gain a defined border under prefers-contrast: more
.chrome { background: oklch(1 0 0 / 0.6); backdrop-filter: blur(12px); }
@media (prefers-reduced-transparency: reduce) {
.chrome { background: var(--surface); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
.chrome { background: var(--surface); border: 1px solid var(--border-strong); }
}Bad
Good
Why it matters
We honour `prefers-reduced-motion` everywhere and ignore the two OS preferences that govern translucency — the exact thing glass is made of. That gap is worth naming, because this codebase also ships design-impeccable-no-glassmorphism, which polices blur on taste and performance grounds and never once asks whether the user has asked for less of it. Taste is not consent.
Both signals exist because translucent chrome is genuinely hostile to some people: a `backdrop-filter` toolbar's effective text contrast is whatever happens to be scrolling underneath it, which is unmeasurable and, for a low-vision user, unreadable — and for someone with a vestibular or cognitive sensitivity, a background that shifts continuously behind the text is noise.
`prefers-reduced-transparency: reduce` is macOS "Reduce transparency", iOS the same, Windows "Transparency effects" off. `prefers-contrast: more` is macOS "Increase contrast" and the Windows contrast themes. The remedy is small and additive: keep the glass as the default, then in a `@media (prefers-reduced-transparency: reduce)` block drop `backdrop-filter` to `none` and raise the background to a solid token, and in a `@media (prefers-contrast: more)` block add a defined, contrasting border so the chrome still reads as a separate layer once the blur that used to do that job is gone. Neither query has a JS fallback you need — `window.matchMedia` reads both if you want to reflect the state in the UI.