Text on photos and gradients needs a guaranteed floor

What it is

Contrast is a relationship between two colors. A photograph or a gradient is many colors. White type across a street scene can pass on asphalt and fail on the side of a white van. Mean contrast is meaningless; a reader hits the worst patch. Type on that kind of ground needs a floor: a plate, a solid bar, a dense enough scrim, or placement restricted to a region already known to pass — not a hope that it “looks fine overall.”

Why it happens

Each glyph covers a different patch of backdrop pixels. A headline that crosses cloud and foliage puts letters against different local luminances. Reading is sequential: if any stretch drops below the floor, those letters smear. Gradients are worse. They guarantee that some letters sit in the mid-band, where contrast is pulled toward 1.

A floor turns “type versus ground” back into an approximate two-color problem. A translucent dark scrim under the type still has to be measured as a composite, and sampled along the whole line, not once on the scrim swatch. Video frames and user-uploaded covers change the worst patch every time; without a stable color there is no stable ratio. Structural devices (the plate always present) beat picking one hero image that happens to pass.

Studying it

Sample along the string and report the minimum ratio, not the mean. Keep worst-case assets: blown-out clouds, white walls, the mid-stop of a light gradient, overexposed faces. Compare bare type, scrim, and solid bar.

Independent variables: background type (photo, video frame, linear or radial gradient), flooring method, sample location. Dependent variables: minimum ratio, count of glyphs below the floor, false passes with no floor.

Most automated tools pick one point or read the overlay’s CSS color and miss the mid-gradient. Re-test on real cover images and after theme switches.

Where it stops holding

Solid fills need no floor. A watermark that is not meant to be read should be treated as decoration, not as under-contrasted body copy. A large solid bar changes the layout; contrast still outranks the habit of setting type directly on a hero. Dark mode that inverts type but not the photo can make a previously dark scrim fail. On maps and slides whose backdrop moves with the viewport, the floor must travel with the type, not stay pinned to a canvas corner.

Applying it

• Lift running text off photos and gradients, or put a solid bar / high-opacity scrim behind it so the local pair is two colors again.
• Do not rely on a text-shadow as the only floor; a thin halo still breaks on highlights.
• For titles on user covers, carousels, and video, bake the floor into the component. Do not depend on editors choosing a “dark enough” still.
• Verify: swap in the lightest asset, sample the lightest and darkest ground under each word of the title, and keep the minimum above the floor for that type size. Turning the scrim off should immediately produce failing samples — proof the floor was doing the work, not a lucky photo.

Related

• Same group: J2.01.1 Contrast thresholds relax as type size and weight increase · J2.01.2 Semi-transparent text must be measured on the composited color
• Nearby: J2.10 Non-text Contrast · J2.11 Reflow and Text Resize · J2.15 Dark Mode and High Contrast Compatibility
• Search terms: scrim · text on image · gradient contrast