Legible Text on Images Using Overlays Scrims Placement and Contrast Ratios

Every platform feed renderer crops, dims, and compresses your image differently. The text that looked crisp in your design tool becomes unreadable on an Android phone at 50% brightness. The fix is not better fonts or bigger type. It is a repeatable method that starts with a scrim overlay, checks contrast against the scrim rather than the image, and verifies at actual rendering size. Follow these steps once and every image passes WCAG 2.2 AA.

The background of any image has variable luminance. A patch of sky at the top might measure 90% brightness while a shadow at the bottom measures 20%. Place white text over the sky and it disappears. Place it over the shadow and it reads fine. A scrim overlay creates a uniform luminance zone behind the text so the contrast ratio stays stable regardless of what the image does underneath.

A scrim is a semi-transparent rectangle placed behind the text block. It can be solid or a fade. A fade that transitions from 0% at the top to 60% black at the bottom lets you keep the image visible in the open area while providing a dark strip for the text. The key specification is the opacity range. Research shows that a black overlay at 40% to 60% opacity achieves WCAG AA compliance on white text for most image content. You adjust the exact value by measuring the contrast ratio of the scrim itself against the text, not against the image pixels beneath it.

The WCAG 2.2 contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter relative luminance. For normal text at AA level the minimum is 4.5:1. For large text at 18pt or 14pt bold the minimum is 3:1. AAA requires 7:1 for normal text and 4.5:1 for large text.

Here is the mistake that causes most failures. A contrast checker samples the rendered pixel at the edge of the text character. That pixel has been antialiased: it blends the text colour with the background colour. The checker sees a middle grey and reports a ratio of 5.2:1 when the actual ratio is 3.8:1. This antialiased-edge-pixel false pass inflates the ratio by up to 1.5:1. Sample from the centre of a stroke, not from the edge, and verify visually at actual rendering size on a dimmed screen.

Solid Overlays

A solid scrim at 50% black behind white text gives a ratio of approximately 5.0:1, which passes AA for normal text. The problem is the hard edge. A solid rectangle looks like a design error unless it spans the full width of the image or is positioned at the bottom like a caption bar.

Fades

A fading scrim solves the hard-edge problem. The fade transitions from 0% at the top of the image to 40% to 70% black at the bottom where the text sits. The text area is fully opaque and the rest of the image remains visible. The fade must reach its maximum opacity before the first line of text begins. If the text crosses a zone where the scrim is still transitioning, the contrast ratio varies across the text line and some characters will fail.

For a fading scrim, measure the contrast ratio at the darkest point. That is the point where the text sits. If the ratio passes there, it passes everywhere because the scrim only gets lighter above the text zone.

Platform Dimensions Shift Without Notice

Every platform help page publishes image dimensions. Those dimensions change without notice. The feed renderer on Android and iOS can crop differently than the same renderer on desktop. Do not hard-code a single set of numbers.

How to Set Your Safe Zone

Place all critical text inside a safe zone at least 10% inside the image edge on all sides. This accounts for the cropping that happens when the platform displays your image in a feed, on a profile page, or in a story viewer with the UI chrome overlaid.

Verify safe zones by exporting the image at the platform's published dimensions and viewing it on an actual device in the feed, not in the design tool preview. The design tool does not simulate the feed renderer's cropping algorithm.

WCAG 2.2 defines contrast as the difference in relative luminance between the text and its background. The background is the scrim overlay, not the underlying image. If you place a semi-transparent scrim over a photograph, the scrim becomes the background for contrast purposes because it is the layer the text sits on.

Uniform Contrast Across the Text Block

The standard requires that the contrast ratio be maintained across the entire text area. A fading scrim that is still fading where the text begins creates a zone of variable contrast. Some characters will be over the darker part and some over the lighter part. The characters over the lighter part may fall below the minimum ratio. Start the text after the fade has reached its maximum opacity.

WCAG 2.2 does not require a scrim. It requires a contrast ratio. If the image itself is dark enough everywhere the text crosses it, no scrim is needed. In practice, images with variable luminance across the text area always need a scrim to guarantee compliance.

Pick a Typeface with a Tall X-Height

Typeface selection matters as much as the scrim. A typeface with a tall x-height reads at smaller sizes than one with a short x-height. The x-height is the height of the lowercase letter x. A tall x-height means more of the character is above the baseline, which improves legibility at small sizes and in low-contrast conditions.

Use Sufficient Weight

Font weight also affects contrast. A light weight (300 or lower) needs a higher contrast ratio to be legible because the strokes are thin. A bold weight (700 or higher) can pass at a lower ratio because the strokes are thick. For text over images, use at least a medium weight (500) for body text and a bold weight for headings.

Control the Measure

Typographic measure, the number of characters per line, should stay between 45 and 75 for continuous reading. Shorter lines cause excessive hyphenation. Longer lines cause the eye to double back to the same line. On a wide image, a single line of text at 24 pt can exceed 75 characters. Break the text into shorter lines or use a larger type size to keep the measure in the optimal range.

A contrast checker plugin samples the rendered pixel at the edge of the text character. That pixel is an antialiased edge pixel: it blends the text colour with the background colour to smooth the character outline. The checker sees a middle grey and reports a ratio of 5.2:1 when the actual ratio is 3.8:1. This false pass inflates the ratio by up to 1.5:1.

The only reliable verification method is visual inspection at actual rendering size on a dimmed screen. Open the image on a phone at 50% brightness. If the text is hard to read, the ratio is failing. Do not trust a plugin that samples rendered pixels. Sample from the centre of a stroke, not from the edge, using a colour picker that reads the original vector colour, not the rendered pixel.