How apps make text readable over any image.

White text over a photo looks great in the mockup — because you picked the photo. Then the feature ships, users bring their own images, and someone's beach photo puts a white sky behind your white label. Every app that overlays text on pictures it doesn't control has solved this problem, and the solutions are invisible precisely when they work.

The problem: you only control half the contrast

Contrast is a relationship between two colors. When you set dark text on a light background, you chose both sides of the relationship, and it holds on every device forever. The moment the background is an image — a user's photo, album art, a video thumbnail, a screenshot — you control one side. The other side is whatever pixels happen to be there.

Worse, an image isn't a color. The usual accessibility target is a 4.5:1 contrast ratio for body text (3:1 for large headlines), but a photo can average a comfortable mid-gray while the exact patch behind one word is nearly white. Averages don't render text; pixels do. The failures that reach production are almost always local: the whole design passes, except the one word sitting on the cloud.

The scrim: the dimming layer you never notice

The workhorse fix is a scrim — a semi-transparent layer slipped between the image and the text. The term comes from stage lighting, where a scrim is a gauze that softens whatever is behind it, and that's exactly the job here: pull the whole image toward one end of the luminance range so your text can safely live at the other end.

Look for it and you'll see it everywhere: media apps dim cover art under white titles, photo pickers dim thumbnails under selection counts, full-bleed headers sit behind a wash of black. A flat scrim at 30–50% black is usually enough to make white text hold on anything short of pure white. The tell that it's working is that you don't see it — toggle it off and the design collapses; toggle it on and the image just looks a touch moodier.

A scrim doesn't have to be black. Tinting it with a brand color turns a utility layer into an identity layer — the image reads as "ours" while doing the same contrast work. Keep the luminance shift; that part is load-bearing.

Gradient scrims, and the hard-edge mistake

Dimming the whole image is a blunt instrument, and text usually lives in one region — the lower third of a card, the top of a header. So the refined version is a gradient scrim: transparent at one end, 50–70% black where the text sits. The image stays vivid where nothing needs reading and goes quiet exactly where something does.

The common implementation mistake is a plain two-stop linear gradient. Your eye is extremely good at spotting the line where a gradient begins — the abrupt change in the rate of darkening reads as a visible band across the image, even though no single pixel looks wrong. The fix is to ease the gradient: add intermediate stops so the darkening starts gently and accelerates, the way a good animation curve does. Same endpoints, no visible seam.

Blur, glow, and the tools past the scrim

A scrim buys contrast by sacrificing brightness. Two other tools spend different budgets:

Blur — the frosted-glass look — attacks a different property of the image: detail. Busy texture competes with letterforms even when the contrast math passes, and a strong blur destroys that texture while keeping the color mood. Paired with a light tint, it's the most legible overlay there is, which is why platform design systems lean on it for controls that float over arbitrary content. The cost is real: live blur is one of the more expensive effects a GPU renders, so it belongs on a few surfaces, not every card in a scrolling list.

Shadow as glow — the hard 2-pixel drop shadow of the early web looks dated, but its modern descendant survives: a wide, soft, low-opacity dark shadow behind light text. At that radius it stops reading as a shadow and becomes a per-letter scrim, darkening just the pixels immediately around each glyph. It's the tool of last resort when you can't touch the image at all — captions over user video, for instance — and it's why subtitles stay readable over snow. Thin outlines, the other classic, rarely survive small sizes; at caption scale a one-pixel stroke just makes letters look dirty.

Or let the text adapt instead

The opposite strategy: leave the image alone and change the text. Sample the region behind the label, compute its brightness, and flip between white and black — or shift your accent color until it clears a contrast threshold against what's actually there. The iPhone lock-screen clock does a version of this, drawing its color from the wallpaper rather than shipping one fixed value against every possible photo.

The trap in adaptive color is measuring the average. A photo that averages mid-gray can still hold a white patch directly under one word — and the average says everything is fine. Measure the worst region behind the actual glyphs, not the mean of the whole image, and decide against that. When even the worst-case color choice can't clear the bar, fall back to a scrim; adaptation and dimming compose nicely.

Sometimes the fix is layout

The most readable overlay is the one you didn't ship. If you control the composition, put the text where the image is quiet — photographers leave negative space, and layouts that respect it need half the scrim. And if the design survives it, don't overlay at all: a title set below its image on a solid surface wins every contrast argument permanently. The overlay should be a choice you made for a reason, not a default you inherited from a mockup that happened to have a dark photo in it.

Where this bites app developers hardest

For most indie developers, the highest-stakes text-over-image surface they ever ship isn't in the app — it's the store listing. A screenshot frame is a headline sitting on top of your own UI, judged at thumbnail size, in a carousel next to competitors who got this right. Every technique above applies, and ShotCanvas templates apply them for you: backgrounds and headline colors are checked for contrast against what's behind them, accents auto-shift when they'd sink into the backdrop, and the text stays readable at the size installs actually happen.