Overlay playground

The matrix measures five text-over-image techniques against five hostile images and pins the results down as regression tests. This page hands you the controls instead: the same component, the same math, live. Drag the headline across the bright part of the photo and watch the badge give up. Uploads stay in your browser — the sampling runs locally, nothing is sent anywhere.

Playground controls

Image

Bright & pale Busy texture Dark & moody Split contrast Subject at edge Drop / pick
your own

Your image never leaves the browser.

Technique

Gradient Overlay Letterbox Shadow Blur pad

Text tone

Light text Dark text

Position

Top left Top right Bottom left Bottom right Center

…or drag the text on the image.

Headline

Aspect ratio

16:9 21:9 4:5 1:1

Container width

Summer hours start Monday

15.83:1 AAA Show sampled region

The number is the average color under the text block, run through the same math as npm run contrast. Two honest caveats: an average can't see noise (a speckled region can measure AAA and read like soup), and the build script samples fixed regions per position while this page samples the live text box — snap a preset and the numbers land close to the matrix badges, not always identical.

Where these numbers come from — and where they lie — is covered in Text over images is a CMS problem. The curated failure catalogue lives in the matrix.