"Liquid glass" UI — translucent, blurred panels that let whatever's behind them show through — is everywhere right now, from Apple's own interface language to countless portfolio and product sites, including a few spots on this one. It looks fantastic in a screenshot. It's also quietly making sites harder to use for people with low vision, and most teams shipping it haven't tested for that.
Contrast that isn't actually stable
WCAG's contrast requirements assume a text color and a background color you can actually measure. A translucent glass panel doesn't have one fixed background — its effective color changes depending on whatever renders behind it. A card that comfortably passes contrast over a plain section can quietly fail the moment it scrolls in front of a busy photo, a bright gradient, or another panel's edge. Most contrast checkers test against a single flat color, which means most teams never catch this.
Blur removes the edges low-vision users rely on
Backdrop blur softens the boundary between a component and the page around it. That's the effect everyone's going for, but it's also exactly the kind of edge definition that people with low vision, cataracts, or certain color-vision deficiencies depend on to tell where one element ends and another begins. A crisp border and an opaque background aren't just stylistic defaults — they're doing real work.
Motion and depth cues can cause real discomfort
A lot of glass effects animate opacity, blur intensity, or parallax on hover and scroll. For users with
vestibular disorders, that kind of subtle depth-and-motion effect can trigger genuine discomfort, the
same concern that's long applied to excessive parallax scrolling. If an effect only exists to look
polished, it should be easy to turn off — and it should respect prefers-reduced-motion
automatically, not as an afterthought.
Glass UI is one symptom of a bigger pattern
It's not just glass panels. Scroll through enough modern marketing sites, AI-product landing pages, and design-award showcases and a pattern shows up again and again: thin, light-gray type floating on white or on a busy gradient; low-contrast text laid directly over photography with no scrim behind it; entire pages built around a "vibe" that photographs beautifully for a portfolio screenshot but is genuinely hard to read at arm's length. Even Apple's own marketing pages have drawn recurring criticism from accessibility advocates for exactly this — thin, pale body copy that looks premium and reads poorly. It's not just web design, either — I wrote separately about how the same problem shows up on TV UI, in print, and on billboards, and why it seems to be getting more common, not less.
That raises the real question underneath all of it: when a site's look and its usability start pulling in different directions, which one is actually most important — the aesthetic, or the function? Right now, aesthetic seems to be winning. A beautiful interface that's hard to read hasn't actually succeeded at its most basic job, which is communicating something to the person looking at it. Good design isn't a tradeoff between the two; it's making both work at the same time. When a project only has room for one, function has to win, because nobody was ever helped by a page they couldn't read.
Test against the worst case, not the best one
The fix isn't complicated, it's just usually skipped: check contrast against the darkest and lightest realistic points of whatever backdrop a glass panel could ever sit on, not a single average color. Tools like the WebAIM Contrast Checker and Coolors Contrast Checker make that a five-second check against WCAG's AA and AAA thresholds — there's no excuse for skipping it. Test with the browser's Reduce Transparency setting on. And if a panel is going to hold real content, not just a decorative icon, give the content its own solid backing layer instead of trusting the glass tint alone to carry contrast. The same discipline applies to any translucent surface, which is a big part of why accessibility can't be a separate checklist from the rest of the design.
This is what happens when text sits directly on a glass tint.
Same card, same backdrop — just a darker, more opaque glass tint behind the words.
Same photo, same glass frame, same text size and color. The only difference on the right is a darker, more opaque glass tint — still translucent glass, just with enough contrast to actually read.
How I use it without it becoming a liability
- Text-heavy content gets its own solid backing. Not just the glass tint around it — a genuinely opaque layer behind the words themselves.
- Glass is reserved for decorative or secondary UI, never for body copy, form fields, or anything a user needs to read under pressure.
- There's always a solid, opaque fallback for browsers that don't support
backdrop-filterat all. Glass should be a progressive enhancement, never the only rendering path. - Any animation tied to the effect is subtle and respects motion preferences, and never the only way a state is communicated.
An honest note about this site
This site uses glassmorphism in a few places, the Selected Work cards on the homepage among them. It's there deliberately, and it's tested: the text areas sit on their own solid backing layer, separate from the glass tint around them, and contrast is checked against the darkest and lightest points of whatever photo is behind them, not one average color. The style is a visual choice, not a substitute for the basics — those two things have to coexist, or the effect isn't worth using.