Skip to main content

When the Background Breaks the Rules: What Transparent Displays Teach About Design

· 5 min read

Good design rules often feel like laws of nature. Contrast works like this. Typography behaves like this. Shadows create depth. Until you start designing for transparent displays — and suddenly nothing adds up anymore.

Google has been working on interfaces for AR glasses for over a decade. The insights from that aren't niche topics for spatial design specialists. They're an X-ray of the fundamentals we use daily without really understanding them.

#The container problem

Every classic interface begins with a rectangle. You have an area, you know its boundaries, you control the background. Even dark mode is still a controlled black.

With transparent displays, this control falls away completely. The background is the real world. Bright sunlight, dark rooms, colourful environments — all possible simultaneously, nothing predictable. You're no longer designing for a defined surface, but for a variable you never know.

That sounds like a technical problem. In reality it's a conceptual one.

#Colour lies

On a normal display, colour is reliable. You choose a saturated blue, it appears saturated. You choose white, it glows.

On transparent glass, this reliability disappears. A vibrant, saturated colour that pops on a smartphone almost completely dissolves against a bright sky. Black suddenly means transparent — not dark, but invisible.

That shows what colour really is: not an absolute value, but a relation. Colour always works relative to its environment. On the classic screen, we've controlled this environment so completely that we've forgotten it.

#Typography without ground

Legibility on screens is based on a silent promise: the background is predictable. Bright interface, dark type. Dark interface, bright type. That's enough.

With AR glasses, this promise breaks. Common fonts suddenly become unreadable. Contrast levels that work fine according to WCAG fail in practice. Not because the standards are wrong, but because they were made for controlled backgrounds.

The solution isn't a different font. It's a deeper understanding of why typography is legible at all — and which conditions are really necessary for it.

#Shadows that no longer work

Shadows on interfaces simulate depth. They tell the brain: this element lies above that one. That works because we have a common reference — the surface below.

On transparent displays, this common reference doesn't exist. The shadow of a UI element falls on the real world, which is constantly changing. What looks elegant on a white background becomes visual noise on a complex background.

Here too, the insight is fundamental: shadows communicate hierarchy. The tool is the shadow, the goal is the hierarchy. Whoever confuses this gets lost in the tool.

#Frugality as duty

The interesting thing about all these restrictions is their common denominator. Every element has to hold its own against a world you don't control. That forces radical frugality.

Not frugality as an aesthetic decision — minimalism because it's currently trendy. But frugality as functional necessity. Every superfluous element is an element that can fail. Every unnecessary colour is a colour that disappears under certain conditions.

That's more honest design feedback than any usability test. Reality itself decides what works.

#What this means for classic interfaces

I don't design AR glasses. Probably neither do you. Still, these insights are directly applicable.

The next time you set a shadow, ask yourself: does it communicate hierarchy, or is it just decoration? When you choose a colour, ask yourself: does it work because of its absolute value, or because of its relation to the environment? When you set typography, ask yourself: what conditions does my legibility assumption presuppose?

These questions sound abstract. They become concrete as soon as you ask them and don't have a good answer.

#Practical takeaways

Test your interface on different backgrounds — not just on white and black. Overlaying screenshots on photos is a fast test that shows surprisingly much.

Reduce every element to its function. What does it communicate? What would happen if it was missing? If the answer is "nothing", it's superfluous.

Check contrast not only by WCAG minimum standards, but in real usage contexts. Bright office, dark café, direct sunlight.

And ask with every design decision: is this a rule, or is this a solution to a problem? Rules are solutions that have been generalised. Whoever forgets this applies solutions to problems they never had.

Transparent displays make this difference visible because they break so many assumptions at once. That makes them one of the most useful thinking tools for designers — even for those who will never touch AR glasses.

Cheers,
Rafael

Have a project in mind? I listen, think along, and deliver.

Let's talk