Where glassmorphism stops being legible

A backdrop-blurred translucent surface can hold small metadata text at accessible contrast, but cannot hold body copy over arbitrary backgrounds.

Built the glass material for this site as a single set of custom properties, then sampled effective contrast of text over it against the lightest and darkest backgrounds the page can produce. Repeated for the dark theme.

Confirmed and it decided the whole design system. Over a controlled backdrop, glass holds up for navigation labels, metadata and chips. Over arbitrary content, which is what a body-text column sits on when you scroll, effective contrast becomes a function of whatever happens to be behind it, and that is not something you can guarantee.

So: glass on navigation, overlays, floating panels and small metadata. Opaque paper for every long-form reading surface. This is also why the site does not put glass on project cards, which was the first thing I tried and the first thing I removed.

Blur radius mattered less than opacity. Above about 70% surface opacity the material stops reading as glass; below about 55% text legibility depends on the backdrop. The usable band is narrower than it looks.