Frosted glass is the most seductive UI trend in years — and the one most likely to quietly fail a real user. Translucent panels, blurred backdrops and soft gradients photograph beautifully in a portfolio and then, in production, put pale text on a busy background where a third of your visitors can't read it. The look isn't the problem. Shipping it without a few guardrails is.
Here are the four places glassmorphism breaks accessibility, and the concrete fix for each — the same decisions baked into Farvist so you get them for free.
1. Contrast on a moving target
The core tension of glass is that the surface is translucent: whatever is behind it bleeds through. That's the whole effect, and it's also why text contrast is unpredictable — the "background" of your text isn't a fixed color, it's a blurred average of whatever scrolled underneath it.
The fix is two-part. First, the glass fill needs enough opacity that text sits on a reasonably stable base — a fill that's 6–10% white on a dark theme is enough to anchor readability without killing the effect. Second, and more important, brand colors that look fine as a button fill are usually too dark to use as text. Farvist's electric-violet primary (#6d4af5) scores only about 3.7:1 as text on the dark surface — below the WCAG AA threshold of 4.5:1. So the framework exposes a separate, lighter token, --fv-primary-text, tuned to clear AA (~6:1), and uses that for links and text while the raw primary stays for fills. One color for painting, a readable sibling for reading.
/* fills use the brand color… */
.btn-primary { background: var(--fv-primary); }
/* …but text uses the readable sibling */
a { color: var(--fv-primary-text); }2. When the blur isn't there
The property that makes glass, backdrop-filter, isn't universally supported, and some users disable it. When it fails, a translucent panel doesn't gracefully become opaque — it stays see-through, and now your text really is floating on raw background. That's the worst-case readability failure, and it happens silently.
The answer is a progressive-enhancement fallback: assume the surface must be readable without blur, and only add the frost when the browser can honor it.
.glass {
background: var(--fv-surface-solid); /* opaque, always readable */
}
@supports (backdrop-filter: blur(1px)) {
.glass {
background: var(--fv-glass-bg); /* translucent frost */
backdrop-filter: blur(16px) saturate(140%);
}
}Every glass surface in Farvist ships this way, so a browser that can't blur gets a solid panel instead of unreadable text. The effect degrades; the content never does.
3. Losing the user's place
Soft, low-contrast surfaces make it easy for keyboard focus to disappear. If your focus ring is a subtle glow that blends into a blurred panel, keyboard and switch users can't tell where they are. Glass UI needs focus states that are more assertive than usual, not less — a solid, high-contrast ring via :focus-visible, never removed, never reduced to a color shift. And because the whole aesthetic leans on color, nothing meaningful should be communicated by color alone: a form error is a red border and a message and an aria-invalid flag, a status dot is a color and a text label.
4. Motion that doesn't ask permission
Glass tends to travel with motion — drifting gradient backdrops, floating cards, pulsing glows. For someone with vestibular sensitivity, that ambient movement ranges from distracting to nauseating. The rule is simple and non-negotiable: every animation sits behind @media (prefers-reduced-motion: reduce) and switches off (or drops to a single static frame) when the user has asked for less. It's one media query, and it's the difference between a delightful site and one a real person has to close.
The checklist
If you're building frosted UI by hand, this is the whole list:
- Text color hits 4.5:1 — use a readable token, not the raw brand color, on translucent surfaces.
- Glass has an opaque
@supportsfallback so it's readable withoutbackdrop-filter. - Focus rings are solid and high-contrast, never removed.
- Meaning never rides on color alone.
- All motion is
prefers-reduced-motion-aware.
Farvist verifies the automatable parts of this with axe-core on every build (0 violations across the docs and templates, in both themes). Automated tools can't catch everything — they famously can't evaluate the contrast of gradient text, which we check by hand — but they catch the regressions that slip in between careful reviews.
The point isn't that glassmorphism is dangerous. It's that "looks great in a screenshot" and "works for everyone" are two different bars, and the gap between them is a handful of decisions you can make once. Make them once, and the beautiful version is also the accessible one.
Farvist bakes all of the above in — see the accessibility notes, or read how the theming architecture makes the readable-text token possible.