Glassmorphism Is Not a Default
NEVER: Apply `backdrop-filter: blur()` to ordinary content surfaces (cards, tiles, panels) — it re-blurs everything behind it on every scroll tick, and makes text contrast a property of whatever happens to be scrolling underneath (the same label can measure 8:1 over one band and 1.9:1 over the next), which no test can catch. Reserve blur for chrome that genuinely overlaps scrolling content — a sticky nav, a sheet — and use opaque surfaces everywhere else.
Reserve backdrop blur for a surface that genuinely overlaps scrolling content, and use opaque surfaces everywhere else
Bad
Good
Why it matters
The detector flags `backdrop-filter: blur()` (any radius) applied to ordinary content surfaces — cards, tiles, panels — rather than to an overlay. Two costs follow. Paint: the browser must sample and blur everything behind the element on every frame it is composited, so a grid of glass cards re-blurs on each scroll tick. Contrast: the effective color behind translucent text is whatever happens to be scrolling underneath, so the same label can measure 8:1 over a dark band and 1.9:1 over a light one — the ratio is a property of the backdrop, not of your tokens, and cannot be tested.
Blur earns its cost in exactly one place: chrome (a sticky nav, a sheet) that overlaps scrolling content, where the effect communicates layering. Even there, Emil Kowalski's apple-design skill draws one hard line inside the exception: "**Never stack a light translucent surface on another** — legibility collapses," because each layer samples the already-blurred layer beneath it and the text ends up floating on mush.
And note what this principle does NOT cover: it polices glass on taste and cost grounds, but never asks whether the user has requested less of it — for that, see design-reduced-transparency-contrast.