Lucid Glass
A vanilla JavaScript & WebGL backdrop-filter to get legible text over any picture, without flat overlays or dark gradients.
IPAX-backdrop with linear blur
Corrects whatever is behind an element to guarantee WCAG 2 contrast.
The engine adjusts the lightness (L in OKLab) of the picture's pixels underneath the text, just as necessary to hit the target ratio. Blur and a feather mask can be applied. Setting the contrast to 1 turns the engine into a pure linear blur utility.
The text boxes above are plain HTML elements driven by --ipax-backdrop-* CSS properties.
Source and documentation on GitHub »
Experiment
Drag any box and resize it from its bottom-right corner. The boxes labeled "Light and dark" and "Custom color" use the effect; the others are test backdrops.
The primary goal is ensuring legible text over photos. To do this without asking for screen-capture permissions, the engine must rebuild the background by extracting only images and solid colors, ignoring other DOM content.
To keep the solution fast and robust, anything that cannot be safely redrawn (like CSS gradients or transformed elements) gets covered by a translucent veil, applying the flat tone needed to guarantee contrast against the worst possible background.
Standard rgba() backgrounds are fully supported and corrected
CSS gradients cannot be redrawn. They get a contrast veil instead.
Transformed elements are hard to track. They get a contrast veil instead.
Feather (px) (expand TRBL)
1. Tricontrast keeps the backdrop inside the band where white and black text both reach the ratio.
It only exists up to 4.5:1, where monochromatic options narrow just to #757575 and #767676, flattening the picture's luminosity into a near-uniform field.
2. APCA contrast is not offered, as the GPU shader cannot depend on (or faithfully reproduce) the licensed reference implementation.
3. WCAG is defined for text over a plain color; it says nothing about how the formula should be adjusted for text over a picture. In my experiments, image detail "fights" the legibility of the text: without blur, it's better to raise the contrast to the next tier (from 3 to 4.5, and from 4.5 to 7). A blurred backdrop moves the image closer to the flat-field case the model measures, so the reported ratio becomes a more meaningful predictor of legibility.
— Santiago Bustelo
IPAX-backdrop v0.1.03 • November 2026. Part of the IPAX System.