← Lab

TextImageOverlay

Text over an image is the pattern every content-managed site converges on, and the one where two editors — the one who picked the photo and the one who wrote the headline — silently share responsibility for a contrast ratio neither can see. Below: five techniques against five deliberately hostile images. Every cell's badge is a real measurement (npm run contrast samples the image region under the text and applies the technique's overlay math), not an assertion. The long-form version of this argument is in the post . The interactive version — bring your own image — is the playground .

Badges measure the average color of the sampled region — a deliberately blunt instrument. The point of the matrix is that even the blunt instrument catches most of what eyeballs miss.

Gradient

A directional eased scrim anchored at the text. The default — spends the least image to buy the most contrast.

Demo: Gradient technique on the busy texture image — Scrim beats texture: detail fades under the ramp before the text starts. 13.13:1 AAA

Demo: Gradient technique on the dark & moody image — Nearly free — the scrim is invisible against an already-dark corner. 17.88:1 AAA

Demo: Gradient technique on the split contrast image — Anchored at the dark half, the scrim barely shows. See the breakage gallery for the other corner. 15.13:1 AAA

Demo: Gradient technique on the subject at edge image — The ramp climbs toward the subject; a longer headline would reach the rocks. 13.46:1 AAA

Overlay

A flat 40% wash over the whole frame. Predictable, position-independent, and it dims the photo everywhere including where it did not need to.

Demo: Overlay technique on the busy texture image — The wash calms the texture evenly. Legible, at the price of mud. 14.89:1 AAA

Demo: Overlay technique on the dark & moody image — Redundant: the image was already doing the overlay’s job. 10.78:1 AAA

Demo: Overlay technique on the split contrast image — One wash, two halves: the dark half drowns, the bright half is still fighting. 9.43:1 AAA

Demo: Overlay technique on the subject at edge image — The lighthouse dims with everything else. The wash has no aim. 7.18:1 AAA

Letterbox

Text on a solid plate pinned to the bottom edge. The image never touches the contrast math — the plate always wins.

Demo: Letterbox technique on the busy texture image — Texture ends where the plate begins. The trade is composition, not contrast. 16.45:1 AAA

Demo: Letterbox technique on the dark & moody image — Guaranteed contrast on an image that did not need the help. 16.45:1 AAA

Demo: Letterbox technique on the split contrast image — The plate is the only technique indifferent to which half it covers. 16.45:1 AAA

Demo: Letterbox technique on the subject at edge image — Safe — unless the plate covers the shoreline. Crop and plate fight over the same edge. 16.45:1 AAA

Shadow

Text-shadow only, no scrim. Reads as most integrated with the photo and is the only technique with no floor under it.

Demo: Shadow technique on the busy texture image — The badge says AAA; your eyes disagree. Average-color math cannot see noise — this cell is where the measurement lies. 12.50:1 AAA

Demo: Shadow technique on the dark & moody image — Shadow’s best case — and even here the number is honest, not generous. 6.83:1 AA

Demo: Shadow technique on the split contrast image — Whether this works depends entirely on which half the editor puts the text in. 1.59:1 fails WCAG

Demo: Shadow technique on the subject at edge image — No scrim to spend: the photo stays pristine, the text takes all the risk. 2.90:1 fails WCAG

Blur pad

A frosted plate behind the text block. Localized like letterbox, softer than overlay; degrades to a translucent tint without backdrop-filter.

Demo: Blur pad technique on the busy texture image — Blur averages the chaos into a usable plate. This is the pad’s home turf. 14.26:1 AAA

Demo: Blur pad technique on the dark & moody image — The frost reads as tone-on-tone. Quietly elegant, arguably unnecessary. 10.91:1 AAA

Demo: Blur pad technique on the split contrast image — The pad averages whatever sits behind it — including a hard edge through the middle. 9.80:1 AAA

Demo: Blur pad technique on the subject at edge image — Localized like letterbox, but it can float away from the subject instead of underlining it. 7.74:1 AAA

How it breaks

The matrix shows techniques behaving. These are the CMS failure modes — the ways real content defeats a template that demoed beautifully.

Demo: shadow technique with text over the dark corner of a split image — **Position flip.** Same image, same technique, same settings. The only edit was dragging the text to the other corner — the kind of change a CMS calls "layout preference" and WCAG calls a violation.

Demo: shadow technique with text over the blazing corner of a split image — **Position flip.** Same image, same technique, same settings. The only edit was dragging the text to the other corner — the kind of change a CMS calls "layout preference" and WCAG calls a violation.

Demo: the same overlay rendered at sidebar, column, and full width (sidebar width) — **One component, three homes.** The same instance at sidebar, column, and hero widths. The type scales with the *container* (cqw units), not the viewport — before container queries this took a ResizeObserver and regret. Container-query type scaling: the title tracks the component’s width, not the viewport’s.

Demo: the same overlay rendered at sidebar, column, and full width (column width) — **One component, three homes.** The same instance at sidebar, column, and hero widths. The type scales with the *container* (cqw units), not the viewport — before container queries this took a ResizeObserver and regret. Container-query type scaling: the title tracks the component’s width, not the viewport’s.

Demo: aspect ratio changes at a breakpoint, moving text onto different image regions — **Aspect ratio at the breakpoint.** The page swaps this container’s aspect-ratio at 640px — watch the text land on a different part of the photo. This is the CMS problem in one figure: the designer approved the wide crop, the phone got the tall one, and the text is sitting on pixels nobody reviewed.

Demo: an editor-length headline overflowing the scrim’s safe area — **The long headline.** The scrim was tuned for a short title; the real headline climbs out of it. Titles are an editorial free variable; the scrim's safe area is not. 17.88:1 AAA

Demo: light text with only a text-shadow, centered on a bright pale image — **Editor's revenge.** The weakest technique meets the hostile image. The badge is not a bug. 1.65:1 fails WCAG

When to use which

Gradient: Default. One busy area, one quiet area — anchor the text in the quiet one.; Where it lies: On uniformly bright images the ramp costs most of the photo before the number clears.
Overlay: When the image is decoration and the text is the point.; Where it lies: It reads as reliable but a 40% wash still struggles on a blown-out frame — and dims the good ones.
Letterbox: When contrast must be guaranteed and the image can end where the text begins.; Where it lies: It never lies about contrast. It lies about being the same design the comp showed.
Shadow: Short labels on images you control and have actually looked at.; Where it lies: It has no floor. The same settings pass on one upload and fail on the next.
Blur pad: Busy images where a local plate beats a global wash.; Where it lies: Its contrast depends on what it happens to be blurring — the measurement is per-image, not per-technique.

TextImageOverlay

Gradient

Summer hours start Monday

Field notes, third season

After-hours access

Golden hour, extended

The last keeper left in 1990

Overlay

Summer hours start Monday

Field notes, third season

After-hours access

Golden hour, extended

The last keeper left in 1990

Letterbox

Summer hours start Monday

Field notes, third season

After-hours access

Golden hour, extended

The last keeper left in 1990

Shadow

Summer hours start Monday

Field notes, third season

After-hours access

Golden hour, extended

The last keeper left in 1990

Blur pad

Summer hours start Monday

Field notes, third season

After-hours access

Golden hour, extended

The last keeper left in 1990

How it breaks

The lucky corner

The unlucky corner

One component, three homes

One component, three homes

One component, three homes

Resize this window

University announces revised parking enrollment procedures for returning faculty, staff, and affiliated contractors effective this fall

A beautiful day

When to use which