The Honeymoon Is Over

When Apple unveiled Liquid Glass at WWDC 2025, the design community had a collective moment. The translucent, light-bending surfaces looked like nothing we'd seen in a production OS. Controls that morphed and flowed. Surfaces that refracted the content behind them in real time. It was, by any measure, a technical and visual achievement.

Six months later, the vibe has shifted. A highly-upvoted thread on r/UXDesign asked the question designers had been whispering: "Apple's new Liquid Glass UI doesn't look accessible. How does Apple get away with shipping designs that fail WCAG's guidelines?" Accessibility experts at firms like Infinum and Access Advisors published their own findings. The consensus was forming: Liquid Glass prioritizes aesthetic novelty over usability.

We decided to stop speculating and start measuring. This isn't an opinion piece about whether Liquid Glass looks good (it does). It's a measurable audit — with real contrast ratios, specific WCAG criteria, and documented failures — of what happens when translucent UI meets the real world.

What We Tested

We tested Liquid Glass on an iPhone 15 Pro running iOS 26.2 and a MacBook Pro running macOS Sequoia 26.2 over a two-week period. Here's our methodology:

The wallpaper selection matters. Apple's marketing materials showcase Liquid Glass on carefully curated gradients — smooth, mid-tone backgrounds designed to make the translucency look perfect. Real users have photos of their kids, their dogs, vacation sunsets, and screenshots they forgot to delete. We tested on what people actually use.

The Audit: Element by Element

Control Center

The Control Center is where Liquid Glass is most visible and most problematic. In iOS 17, toggles were opaque colored tiles — WiFi was blue, Bluetooth was blue, Airplane Mode was orange. The visual language was instant: color = on, gray = off. You could read it from across the room.

In iOS 26, those tiles are now translucent glass surfaces. The icons remain, but they float on a blurred, refracted version of whatever is behind the Control Center. The state indication (on/off) now relies on subtle luminosity differences in the glass material rather than distinct color fills.

This is the core pattern we found across every element: Liquid Glass passes on curated backgrounds and fails on real ones. The same icon, the same text, the same UI element — accessible or inaccessible depending on what's behind it.

Notifications & Lock Screen

Notification cards in iOS 17 used a frosted material that was translucent enough to suggest depth but opaque enough to guarantee text readability. The background blur was heavy — you could tell something was behind the card, but it never competed with the notification text.

iOS 26's Liquid Glass notifications are noticeably more transparent. The blur is lighter, and the refraction effect lets more of the wallpaper's color and brightness bleed through. On a dark wallpaper, this looks stunning. On a bright vacation photo with a white sky? The white notification text nearly disappears.

The stacking problem deserves emphasis. When iOS groups notifications, each card is a translucent layer. Three glass cards stacked means three layers of translucency — and the blur algorithm doesn't compensate for depth. The result is a stack of cards where readability degrades with each layer.

Navigation Bars & Tab Bars

This is where Liquid Glass creates the most dynamic accessibility problem. Navigation bars in apps like Settings, Safari, and Music use a glass blur effect that responds to the content scrolling behind them. As you scroll, the content flowing under the nav bar changes — which means the contrast ratio of the nav bar title changes in real time.

We scrolled through Settings and sampled the "Settings" title text at different scroll positions. The contrast ratio wasn't static — it fluctuated between 3.1:1 and 7.2:1 depending on what list items were passing behind the glass. A section header with large white text behind the nav bar? The title nearly disappeared. Dark text rows behind it? Perfectly readable.

Think about what this means for WCAG compliance. Is this element accessible or not? The answer is: sometimes. The contrast ratio is a function of the content behind it, which changes as the user interacts. You can't test it once and declare it compliant. This is new territory for accessibility standards that were designed for static foreground-background relationships.

Widgets & Home Screen

Widgets are particularly affected because they display data — temperatures, calendar events, time — that users need to read at a glance. iOS 17 widgets had adaptive but mostly opaque backgrounds. iOS 26 widgets use adaptive glass that responds to the wallpaper.

We tested the Weather and Calendar widgets across all five wallpapers. The Weather widget's temperature readout — arguably the most important piece of data on the entire home screen — ranged from clearly legible to genuinely unreadable depending on the wallpaper region directly behind it.

macOS: Menu Bar, Dock & System Dialogs

macOS Sequoia applies Liquid Glass to the menu bar, Dock, and system modal dialogs. The menu bar is the most persistent offender — it sits at the top of every screen, and whatever desktop wallpaper is behind it directly affects the readability of menu titles and status icons.

We tested with a bright aerial photo as the desktop wallpaper — the kind of image millions of Mac users choose. The "File," "Edit," and "View" menu labels in the menu bar measured between 2.9:1 and 3.8:1 against the glass-blurred sky behind them. The status bar icons (WiFi, battery, clock) fared slightly better at 3.2:1 to 4.1:1 but still dipped below AA for some icons.

The Dock's glass shelf effect is largely cosmetic — app icons are opaque and unaffected. But the focus ring visibility on glass surfaces is a real concern. During VoiceOver testing on macOS, the keyboard focus indicator was difficult to distinguish on glass-backed system dialogs, particularly on lighter wallpapers. This matters for the approximately 7% of Mac users who navigate primarily with a keyboard or assistive technology.

Motion & Animation

Liquid Glass surfaces include parallax and light-refraction animations that respond to device tilt and scrolling. Tilt your phone, and the glass highlights shift. Scroll past a glass surface, and the refraction updates in real time.

We tested with Reduce Motion enabled. Good news: most of the parallax effect is disabled. The glass surfaces still exist, but they behave more like static frosted panels. However, we noticed residual motion — a subtle luminosity shift on glass surfaces during scrolling that persists even with Reduce Motion on. It's minor, but for users with vestibular disorders who enabled Reduce Motion specifically to avoid this kind of stimulation, "minor" isn't the point.

The Numbers: Contrast Ratio Summary

Here's our complete contrast ratio data across elements and conditions. WCAG AA requires 4.5:1 for normal text and 3:1 for large text and non-text elements. AAA requires 7:1 for normal text.

For comparison, we spot-checked the same elements on an iPhone running iOS 17.7. The Control Center icons measured a consistent 8.2:1. Notification body text: 9.1:1. Settings nav bar: 11.3:1. These numbers didn't change based on wallpaper because the surfaces were opaque. Boring? Maybe. Accessible? Always.

Why "It Depends on Your Wallpaper" Is an Accessibility Problem

This is the core finding of our audit, and it's worth sitting with: Liquid Glass makes WCAG compliance non-deterministic. The same UI element, in the same app, on the same device, can either pass or fail accessibility standards based on a variable the user controls (their wallpaper) and the system can't fully predict.

WCAG was designed for a world where foreground and background are knowable. A button has a text color and a background color. You can measure the ratio. It either passes or it doesn't. Liquid Glass breaks this model. The "background" of a glass surface isn't a color — it's a blurred, refracted sample of whatever content happens to be behind it at that moment.

This creates a paradox. Apple could argue that Liquid Glass passes WCAG on their default wallpapers — and they'd be technically correct. But WCAG's intent is to ensure content is readable for all users in all reasonable conditions. If your wallpaper choice can make system UI unreadable, the system isn't meeting that intent.

The UX Collective framed it well: "Text contrast often suffers over blurred or moving backgrounds, making it harder to read, locate active UI elements, or even understand where to tap." This isn't a theoretical concern. We measured it.

Does "Reduce Transparency" Fix It?

Apple provides an accessibility toggle for exactly this scenario: Settings → Accessibility → Display & Text Size → Reduce Transparency. When enabled, glass surfaces become more opaque, and contrast ratios improve significantly. We re-tested every element with this toggle on.

So it works — mostly. With both toggles on, Liquid Glass becomes substantially more readable. The surfaces are more opaque, the text pops more, and the wallpaper has less influence. But this raises three problems:

What Portfolio Designers Should Learn from This

Apple just demonstrated, at planetary scale, what happens when aesthetic trends override accessibility fundamentals. Whether you love or hate Liquid Glass, there are concrete lessons here for anyone building a portfolio or designing interfaces.

1. Translucency Is a Contrast Liability

If you don't control the background, you don't control the foreground contrast. This is the fundamental lesson. Glass cards, frosted panels, blurred overlays — they all inherit contrast problems from whatever is behind them. If your portfolio hero section uses a glassmorphism card over a full-bleed photo, your text readability is at the mercy of the photo's brightness. Add a semi-opaque backdrop, use backdrop-filter with a solid color overlay, or just use a solid background.

2. Test on Ugly Wallpapers, Not Marketing Shots

Apple demos Liquid Glass on curated gradients. Real users have photos of their dog catching a frisbee in direct sunlight. If your design only looks good on the background you hand-picked for the Dribbble shot, it doesn't actually work. Test your translucent elements on worst-case backgrounds: white, bright photos with hot spots, complex imagery with high local contrast. If it's readable on the ugly wallpaper, it's readable everywhere.

3. Aesthetic Trends Don't Override WCAG

Glassmorphism is trending. Liquid Glass is trendy. A hiring manager reviewing your portfolio at 2 PM with sunlight hitting their screen doesn't care about trends — they care about whether they can read your case study title. Your portfolio review won't include "but the glass effect looks cool" when the reviewer can't find your navigation.

4. Always Provide a High-Contrast Fallback

If Apple needs Reduce Transparency, your glass card component needs a fallback too. Use the prefers-reduced-transparency media query (now supported in Safari and Firefox) to serve a solid-background version of translucent elements. This isn't extra work — it's the same component with a different background value.

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
}

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: none;
  }
}

5. Motion Is Not Decoration

Every animation should have a prefers-reduced-motion equivalent. Apple's Reduce Motion toggle doesn't fully disable Liquid Glass's refraction effects. Don't make the same mistake in your portfolio. Parallax scroll effects, hover animations, page transitions — all of them need a reduced-motion path that preserves functionality without the visual motion.