Text over images on slides: scrim, blur panel, outline or placement?

Which methods make text readable on a photo?

There are four common treatments, and a fifth that works when the others do not.

Meta's Business Help Center, writing about ads, advises text overlays in a clean font, a large enough size and a contrasting hue (opens in a new tab) and gives no number. This page supplies the numbers for the contrast part, using the WCAG ratio (opens in a new tab) as a benchmark. The formula is worked by hand on the text contrast page.

What is the example image?

To compare the methods fairly, every one is applied to the same made-up harbor photo on a 1080 by 1920 slide. The hex values are illustrative. Ratios are cut to two decimals, as on the text contrast page, and where a blended color has a hex value printed, the ratio is measured on that hex value.

The headline is three lines of 80 px type with a 96 px line height, so the block is 288 px tall. It sits at y 330 to 618 and crosses the horizon at y 450. Line 1 is on the sky, line 2 straddles the horizon and line 3 is on the hills.

For this block, white text is limited by the sky at 1.35, and black text by the hills at 4.47. That is just under 4.5:1, so neither color passes as it is. Every method below has to fix that.

What does a scrim do, and when does it fail?

A uniform black scrim at opacity 0.5 turns the sky into #687076 (white text scores 5.03) and the hills into #303D34 (11.39). Both pass. At opacity 0.45 the sky scores only 4.30, so the sky sets the opacity you need.

A gradient scrim looks more natural, but it is weakest where it starts. Say it runs from opacity 0 at y 330 to 0.7 at y 618. At the three line centers (y 378, 474 and 570) the opacity is about 0.12, 0.35 and 0.58, and white text on the sky, the worst case even for line 3, scores 1.75, 3.19 and 6.65. The first two lines fail because the scrim is thin where they sit. If you use a gradient, put the dark end under the whole text block.

The cost of any scrim is a dimmer photo. In our view it is the simplest fix when the picture is only a background.

What does a blur panel do, and when does it fail?

A blur removes detail, not brightness. A blurred sky is still pale, so white text on it keeps scoring about 1.35. A panel blurred all the way to its average (an idealization, because real blurs average only locally) would be #8DA49F. White text scores 2.64 on that, and black text 7.94.

So a blur panel needs one of two partners: dark text, or a tint. With a black tint at opacity 0.4 the averaged panel becomes #55635F, and white text scores 6.29. The panel fails when it is light and has no tint, and also when the blur radius is small, since sharp edges then survive behind the letters.

What does an outline do, and when does it fail?

A black outline around white letters separates them at 21:1 whatever lies behind. The outer edge of the outline still meets the photo: black against the sky scores 15.52, and against the hills 4.47. The letters stay distinct even on a mixed background.

As we read WCAG, the text is measured against the color adjacent to it, which here is the outline. That is our reading, not a W3C statement. An outline fails in two ways. In our view, at 44 to 52 px a stroke thick enough to help starts to close up the letter openings, and an outline does nothing about a busy photo that distracts from the words. We think it suits headlines at 72 px and above.

What does placement do, and when does it fail?

Moving the text to a calm zone avoids a treatment altogether. If the block moves to y 900 to 1188 on the water, white text scores 7.09. That position also sits inside the conservative strict box on the safe zone page, which runs from y 270 to 1250 (our box, not a TikTok spec).

It fails on the sun flecks. A fleck under a letter scores 1.15 with white text, and a scrim of 0.5 over a fleck still gives only 4.45. So the rule is the worst patch, not the average: a calm area must be calm at its brightest point. Placement also fails when no calm zone sits inside the safe area, which is common on photos with detail all over.

When should you use a label box?

Under a black box at opacity 0.75, even a pure white photo becomes #404040, and white text on that scores at least 10.3 wherever the box sits. Use it when the picture is busy everywhere and the subject is not behind the text. Round the corners, keep the box inside the margins and leave a visible gap between its edge and the subject.

Which method should you try first?

1. Move the text to the calmest zone inside the safe area, and check its brightest patch.
2. If the photo is only a background, add a uniform scrim, starting at opacity 0.5, and sample the result.
3. If the photo must stay bright, use a tinted blur panel, or a label box over a small area.
4. Use an outline for headline-size text as a finishing touch, not as the only fix.

For the font sizes to pair with each method, see font size on slides.

Check the result with the free slide contrast checker, and preview where the interface covers the slide with the safe zone checker. The treatment should be identical on every slide of a post, so the set looks consistent.

What should you check before you export?

• You found the brightest patch behind the text, not only the average.
• After the treatment, white text reaches at least 4.5:1 for body text and 3:1 for headline-size text (benchmarks, not a platform rule).
• The treatment is the same on every slide of the post.
• The text sits inside your margins and clear of the caption area.
• You looked at the final slide on a phone.