Meta Ray-Ban Display & Waveguide Simulation Guide
The Display Glasses Simulator lets designers and developers preview how web applications render on heads-up displays (HUD) and optical waveguide smart glasses, such as the Meta Ray-Ban smart glasses.
Optical Waveguide Physics & Additive Light
Physical optical waveguide systems project graphics directly onto a lens using light emission. This creates an additive color blend where the display light combines with the environmental light. In CSS and web design, this display physics properties are simulated using the mix-blend-mode: plus-lighter rule.
Color Guidelines for AR and Smart Glasses HUD
- Black (#000000) is Transparent: Since the projection adds light, black pixels emit zero light, rendering them completely transparent.
- High Saturation Green and Cyan: Green emitters (wavelength around 520nm) are highly visible against physical backgrounds. Cyan and high-intensity green are recommended for maximum legibility.
- Avoid Dark Gradients: Dark UI backgrounds will fade, leading to low contrast. Use solid bright strokes and flat icons.
Contrast and Typography Legibility Rules
Due to the physical separation of the HUD projector plane and the human eye's environmental focus depth, small fonts suffer from chromatic aberration and readability loss. Keep HUD text sizes at 14px or larger, using medium or bold weights, and prefer high-contrast, clean sans-serif typography like Inter.