Clean structure · C.4

Caption plate on a photo

A museum label on the wall beside the painting, not a sheet of tinted glass over it.

Text on a small translucent plate in one corner of a photo, so the image stays clear and the words stay legible, with the contrast checked against the photo's lightest area.

JavaScript is off, so the controls are hidden and the stage below shows a static field instead of the running effect. Every word on this page is still here. Nothing is hidden behind the script.

4 knobs

How it works

The usual way to put text on a photo is a gradient wash over the whole image, which darkens the photo the client paid for. The reference puts a 454 by 150 plate on a 737 by 369 image and leaves the rest alone. The light card on this stage is the hard case: drop the opacity and watch the contrast fall through 4.5.

The card is a photo with a plate absolutely positioned bottom-left: an inset, a radius, and a dark fill at partial opacity. White text on the plate is legible when the plate composited over the LIGHTEST pixel it can sit on still gives 4.5:1 against white. That is the number the readout computes: it blends the plate colour over the lightest stand-in image tone and measures white against the result. An optional backdrop blur softens what shows through, but it does not change the contrast arithmetic, so it is never the fix.

The knobs, named

Plate opacity, radius, inset, and backdrop blur. All ours. The reference measured rgba(40,38,38,0.63), a 10px radius and an 11px inset.

Knob	Source	What it teaches
Plate opacity	ours	The reference sits at 0.63. On the light card the floor for 4.5:1 is 0.58; the dark card passes from 0.20. The readout prints both floors.
Plate radius	ours	Keep it a step above the button radius so the button reads as sitting on the plate.
Plate inset	ours	Zero turns the plate into a bar glued to the corner. A small inset makes it read as an object on the photo.
Backdrop blur	ours	A static 8px blur behind the plate. It looks softer and changes nothing in the contrast readout, which is the lesson.

sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.

Evidence

VERIFIED (rendered)

fmjfuelpartner.com, 2026-10-15, offline render at 1280px: four service cards at 737x369 with a 454x150 plate at rgba(40,38,38,0.63), radius 10px, inset 11px, holding a 35px title and a 187x50 accent button. The contrast check is ours (WCAG 2.x relative luminance, 4.5:1 for text).

Seen on: fmjfuelpartner.com (design study 2026-10-15).
Dependencies: vanilla CSS
Difficulty: easy
Performance: backdrop-filter costs a compositing layer per plate. It is static here and never animated.
Accessibility and the floor: The readout is the a11y check. Large text (24px+, or 18.66px bold) needs only 3:1, and the readout names both lines.

Where our build departs from the source: The images are flat procedural fields with a known lightest tone, so the contrast figure is exact here. On a real photo you have to find that tone yourself.

Notes

Composability. Replaces the full-image scrim anywhere a photo carries a title. Use the C.7 accent for the button on the plate.

Check contrast against the lightest region the plate covers, not the image average. If the client swaps photos later, the light case is the one that breaks, so set the opacity for it up front.

Shaped section edge

Split intro band