Liquid Glass: designing translucent UI that stays readable

Use Liquid Glass for the layer that floats above your content: tab bars, toolbars, sidebars, floating buttons and sheets. Keep the content itself solid: photos, text, lists and cards.

Apple’s Human Interface Guidelines describe Liquid Glass as a separate layer for controls and navigation, and say not to use it in the content layer. The material only reads as being above something if that something is solid. When a card of text is glass too, people can’t tell what scrolls from what they can tap, and the text sits on whatever happens to be behind it.

Take a travel journal. The photo of the harbour at Hamnøy, and the paragraph you wrote about it, are content. They scroll. The Back button, the Edit button and the tab bar with Journal, Map, Photos and Search are controls. They float, and they are the only things made of glass. If you want a softer look for part of the content, Apple points you to its standard materials, the older blurs, rather than Liquid Glass.

Glass has no fixed background, so you can’t judge it over one good photo. Test every glass control over three: a white or very bright image, a busy pattern and a dark image. Then scroll.

A label colour picked over a dark harbour can vanish over a snowfield. Nielsen Norman Group’s review of iOS 26 found this in Apple’s own apps: translucent controls that were hard to see over busy backgrounds, and text sitting on text, such as the search field in Mail over the messages beneath it.

Make a test board in your design file with the tab bar over a snowy peak, a row of red cabins with white windows, and the northern lights at night. Check light and dark mode. Then scroll a long feed in the prototype, so you also see the moments between photos, when a white caption or a bright edge slides under the bar.

Here is the travel journal’s tab bar as three photos scroll beneath it. The glass dims more over the snow and less over the night sky, and the labels stay above the minimum the whole way.

WCAG makes no exception for translucent controls. Text on glass needs 4.5 : 1 against what is behind it, or 3 : 1 if it is large (SC 1.4.3). Icons, and the edges people need in order to find a control, need 3 : 1 (SC 1.4.11).

The hard part is that the background changes. Measure against the worst point that can sit behind a label, not the average: for white text, the brightest part of the brightest image, after the blur. The W3C’s failure technique F83 covers this case for text over background images, and suggests a quick check against the lightest area when the text is light.

The numbers move a lot. In the pictures in this guide, white labels on clear glass over a white sky measure about 1 : 1. Dim the same glass by 60% and the labels measure 4.9 : 1 over pure white. You can’t promise a ratio over any photo unless something limits how bright the backdrop can get. The next section is about that something.

When labels fail, limit how bright the backdrop can get, rather than hoping the photo cooperates. There are a few tools, and most screens need more than one.

Start with the right variant. Apple’s regular glass is the default and adapts to what is behind it. The clear variant is more transparent and doesn’t adapt, and Apple says it needs a dimming layer. It suggests using clear only over media-rich content, where dimming won’t spoil the content, and where the symbols and labels on top are bold and bright. For a small control, Apple suggests dimming just the area around it, so the rest of the photo keeps its colour.

Where content scrolls under a bar, use a scroll edge effect: a soft blur and fade that separates the bar from what passes beneath it. Apple’s bars use one. If you draw a custom bar over photos, draw one too, and make it dark enough at the point where your labels sit.

Finally, use weight. Semibold or bold labels hold up on glass better than regular ones, because thin strokes break up against the blur behind them. Make icons a size up from what you would use on a solid bar.

Here is the same screen over a bright sky, before and after. The first was designed over a dark photo. The second has a floor under every label.

Reduce Transparency, Increase Contrast and the Liquid Glass setting are choices people make because glass is hard for them to read. Draw and test each one as a real state of every glass component.

Apple says Reduce Transparency makes Liquid Glass frostier and hides more of the content behind it, and Increase Contrast makes controls mostly black or white with a contrasting border. Since iOS 26.1, people can also choose Tinted instead of Clear, under Display & Brightness, for more opacity and contrast. iOS 27 turned that choice into a slider, under Appearance, that runs from clear to fully tinted. Reduce Transparency still goes further than the slider’s most tinted end.

Apple’s own components respond to these settings for you. Custom glass doesn’t, unless you read the settings and change it. On the web, the prefers-contrast and prefers-reduced-transparency media queries do this job, though support for the second is patchier, so check it before you rely on it.

In the travel journal, the opaque tab bar is a solid charcoal capsule with white labels and a darker well on the selected tab. It is not the glass bar with the blur switched off, which leaves pale labels on a mid grey that nobody chose.

Colour on glass should mark the one thing you most want people to do. Leave every other control neutral.

This is Apple’s own advice: use tint sparingly, for primary actions. Tint is a signal. If Share, Location and More are as orange as Add entry, nothing stands out. And every tinted control needs its own contrast check, against a colour that now shifts with the photo behind it.

On the journal’s entry screen, Add entry is the only tinted control. Its glass is the app’s rust colour, nearly opaque, so the white label on it holds about 6 : 1. Share, Location and More are neutral glass. If the app needs more colour, let the content carry it. A photo of red cabins already has plenty.

Use one layer of glass at a time. Inside a glass bar, use plain symbols and labels, not more glass. Keep paragraphs on solid surfaces.

Apple’s Meet Liquid Glass session advises against glass on glass. Each layer blurs and tints what is already blurred and tinted, so edges double up and the contrast you measured for one layer no longer holds. Long text is worse still. A sentence takes several seconds to read, and the background behind every word is different.

The journal’s photo toolbar is one glass capsule holding four symbols. The entry you wrote about Hamnøy sits on a white sheet, not a glass card, so it reads the same over any photo.

Glass moves. It bends light at its edges, stretches when pressed and changes shape as controls appear and disappear. Use that motion to show what changed, not as decoration, and turn it down when people ask.

Apple says Reduce Motion lowers the intensity of some of these effects and turns off the material’s elastic behaviour. Nielsen Norman Group’s review criticised controls that animate when the person gains nothing from it, and toolbars that appear, collapse and disappear so often that people can’t predict where things are.

If the journal’s tab bar shrinks as you scroll, keep it in the same place and keep its labels. With Reduce Motion on, swap the change of shape for a short cross-fade and drop any wobble on press. On the web, put custom glass animation behind the prefers-reduced-motion media query.