A semi-transparent panel mixes with the background

What it is

A menu at thirty percent opacity in front of patterned wallpaper turns grey glyphs and grey print into one stain — which stroke is type, which is wall, is no longer decidable. Translucent UI blending rewrites the foreground as panel × α + background × (1−α). Contrast becomes a function of whatever sits behind the panel right now, and figure–ground segmentation collapses. Geometry can be cleanly separated; the read still fuses. This is mixing in colour channels, not a volume intersecting a wall.

Why it happens

Porter–Duff over is a per-pixel convex combination. Once the background’s spatial frequencies enter the band that carries letterforms — fine wallpaper, blinds, foliage, type on another panel — the mixed spectrum no longer supports an edge for the glyph. Contrast is not a property of the panel; it is conditional on the current background. The same white letter is near zero against a white wall and adequate against a dark sofa. Figure–ground grouping wants a luminance step and a closed contour; α thins the step, background texture breaks the contour, and grouping fails. Video see-through can darken pixels behind the panel before mixing; optical see-through only adds light, so there is no opaque backing to steal the step back.

Studying it

A readability task with a fixed string of letters or icons, while background class and α are manipulated. A laboratory grey field barely exposes the mix; spatially varying backgrounds are required.

Independent variables: α, background spatial frequency (flat / 1/f noise / indoor texture), polarity of text contrast. Dependent variables: identification accuracy, reading time, a rating of “floats in front” versus “melts in”.

Pelli–Robson-style contrast thresholds and MNREAD-style reading speed both work. On eye tracking, type that has melted in produces more regressions and longer fixations than a satisfaction score will admit.

Where it stops holding

On a uniform dark field with high-contrast solid buttons, blending is almost unmeasurable. Low vision and anomalous colour vision have thinner contrast reserve and fail at the same α sooner. Optical see-through has an ambient dynamic range far above what the panel can add, so outdoors mixes worse than indoors. An α tuned on video see-through does not transfer. A game energy shield that is translucent on purpose is semantics, not a readability failure.

Applying it

• Do not paint glyphs, icons, or hit targets directly on a translucent layer; lay an opaque enough backing first, then the controls.
• Accept α against the worst background, not against the flat canvas in the design tool.
• When the environment must remain visible, keep the frame and the type opaque and punch a hole in the middle of the panel.
• How to check: composite the UI onto photographs of striped wallpaper, blinds, and a bookshelf, and read a passage on each. If any photograph needs squinting or a head shift to read, blending is unmanaged.

Related

• Same group: N3.06.2 Occlusion is the strongest depth cue and must not be violated · N3.06.3 Transparency must adapt to background complexity · N3.06.4 Cast and contact shadows declare depth better than transparency · N3.06.5 Transparency carries a pass-through meaning, not just a visual style · N3.06.6 Stacked semi-transparent panels multiply opacity · N3.06.7 On optical see-through, black equals transparent; a dark UI cannot hide reality
• Nearby: N3.03 Depth Conflict · N5.01 See-through Modes
• Search terms: translucent UI blending · figure-ground · alpha compositing