Measure and Repair Text Contrast Over Treatment Images

White copy sits on a photograph. Most of it reads fine. Then four words at the end of a line land on the sunlit part of the image and stop being words. Somewhere in the review, a contrast check reported that the page passed, and in a narrow sense it did — the check just wasn't measuring the letters.

This is the ordinary failure mode for text over treatments. A photograph is not a background color; it is a field of many background colors, and the copy sits across some of them. The repair is not hard, but it has to start from the right sample. The background that matters is the one immediately behind the letters, not the one that produces the best number.

Fix the passage and the viewing conditions first

Before any measurement, name what you are measuring. Not "the captions" — one passage, in one place, at one size. A treatment usually has several text roles, and the contrast decision is different for a headline than for a source credit.

Write down four things and keep them with the file:

The passage and its position. Enough to find it again: "the two-line route note at lower left," or the text layer's name and its position on the page.

Its delivered size and weight. Not the size in the design file's text field alone. Record what the reader will actually see after the deck is scaled, cropped or re-rendered.

The route it is delivered by. A PDF exported at presentation size, a rendered image dropped into a deck, a screen share of the live file. These do not preserve contrast identically, because they do not preserve color and transparency identically.

The criterion. Write "4.5:1, ordinary text" rather than "accessible." WCAG's contrast minimum sets 4.5:1 for ordinary text, with a 3:1 exception for text that qualifies as large. Naming the number means a later reviewer can disagree with your measurement instead of disagreeing with your taste.

The large-text exception is worth understanding precisely, because it is the most common way a genuine failure gets waved through. WCAG's large text is defined by rendered size — roughly 18 point, or 14 point when bold — not by how large the text feels. Two traps follow. An image editor's point-size field describes the text layer, and that layer may be scaled afterward inside a layout, so the field and the rendered result can disagree. And zooming the canvas to 200% makes everything look large without changing anything a reader receives.

If you cannot establish the rendered size confidently, measure against 4.5:1. It is the stricter criterion, and applying it to text that later turns out to be large costs you nothing but a slightly safer page.

The background is the one behind the letters

A page-average check fails here for a structural reason: averaging produces a color that may appear nowhere on the page. Suppose a review tool reports the image's average color as #3A3F45 — a plausible average for a dusk canyon photograph with a bright band across it. Against white, that average gives 10.62:1. Excellent. Meaningless. The letters that vanish are not sitting on the average; they are sitting on the brightest pixels in the frame.

So inspect the text region, not the whole photograph. Three places deserve a sample:

• The brightest patch under light text. The sunlit band, the specular highlight on glass, the white shirt.
• The darkest patch under dark text. The shadowed corner, the deep blue of a night sky.
• The weak end of a gradient. If the background fades from dark to light across the passage, the sample belongs where the fade is closest to your foreground value.

Record where each sample came from, in terms another person can check: "71% across, 63% down — the sunlit band behind the last four words." A favorable background elsewhere on the page cannot stand in for the difficult area, and a recorded position is what prevents that substitution from happening invisibly.

One technical point about sampling. Keep the authored foreground value separate from anti-aliased edge pixels. When text is rendered, the edges of each letterform blend toward the background, so a pixel sampled from the rim of a stroke is a mixture, not the color you chose. At 16 px, most of a letter's pixels are edge pixels. Sample the center of a vertical stem, or better, read the foreground value from the design file where the text color is actually defined, and sample the image only for the background.

And remember what a photograph is: a textured surface, not a flat fill. Two pins with the same color reading can sit under very different amounts of noise, and noise interferes with reading in ways no ratio captures.

Run the comparison and read it honestly

WCAG's technique G18 describes the comparison as one between the text and the background immediately behind it, including backgrounds that vary, using a luminance-based ratio (https://www.w3.org/WAI/WCAG22/Techniques/general/G18). That is the mechanism, and any tool that implements it will do.

Relative luminance is a lightness calculation, not a judgment of how different two hues look. That distinction explains a lot of design arguments. Pure red text on pure green has a contrast ratio of 2.91:1. They could hardly be more different as colors. They are close enough in lightness to fail ordinary text badly. Meanwhile two grays a designer would call similar can separate at 4:1 or 8:1. The formula cares about one thing:

For each channel c in {R, G, B}, with c in 0–255:
  s = c / 255
  linear = s / 12.92                     if s ≤ 0.03928
  linear = ((s + 0.055) / 1.055) ^ 2.4   otherwise

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear
ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Take a synthetic pair. A warm highlight sampled from a sunlit band, #E4CE94, linearizes to channel values of 0.7758, 0.6172 and 0.2961. Weighted, its luminance is 0.6277. White has a luminance of 1. The ratio is 1.05 ÷ 0.6777 = 1.54:1. A deep shadow at #14181D has a luminance of 0.0089, and white on it comes to 17.82:1.

The arithmetic is doing what it is supposed to. The same white text has a tolerable relationship with one part of the image and almost none with another.

Two habits matter when you report the result. First, do not round a failing value up. WCAG's convention is to truncate, and the working example above is a good illustration: 1.5493 truncated is 1.54, rounded is 1.55. It fails either way, but a value near the threshold can be pushed across it by careless rounding, and that error then propagates through every review that cites it. Second, keep the least favorable relevant result visible in whatever summary you produce. A table that shows only the average, or only the sample that passed, is not a summary. It is a selection.

Finally, be honest about scope. A handful of sampled pairs demonstrate the mechanism. They do not establish that every letter on a complex page has been checked. The ratio describes the relationship between two defined colors. It says nothing about stroke width, line length, image noise, or whether the reading order makes sense.

Compare repairs without losing the page's job

There are four moves available when a passage fails, and they are not interchangeable.

Move the passage. Often the cheapest fix, and often the most destructive. Text placed over a photograph usually sits there because of what it labels. Moving a route note off the rim it describes to a darker, emptier region solves the contrast and breaks the reference.

Change the foreground color. Works well when the failing background is roughly uniform. Fails when the passage crosses a boundary.

Add a local backing. A plate, scrim or band behind the text. High control, at the cost of hiding image detail under the plate.

Adjust the image treatment. Darken, desaturate, or apply a gradient over the region. Preserves the layout entirely and changes the photograph the treatment is built around.

To see how these compare, take a worked construction. The page is a full-bleed dusk canyon photograph. A single passage of white text at 16 px regular runs across the lower third, starting over shadowed rock and ending over a band of sunlit rimstone that crosses between roughly 66% and 78% of the page width. Three background samples along the passage:

Sample B passes, narrowly. Sample C is where the last four words disappear.

Now the important structural fact: no single foreground color can satisfy 4.5:1 against both A and C. Against C, a foreground would need a luminance at or below 0.1006, since 0.6777 ÷ 4.5 = 0.1506 and the formula's 0.05 floor comes off that. Against A, a foreground lighter than the background would need a luminance of at least 0.2151, and one darker than it would need a negative luminance, which does not exist. The requirement from C caps the luminance; the requirement from A pushes the floor above that cap. So recoloring is not a partial fix that needs more care. It cannot work while the passage spans both samples. This is the kind of conclusion worth establishing before spending an afternoon trying different shades of gray.

That leaves the other moves. Moving the passage entirely onto the shadowed rock solves the contrast at 17.82:1 and costs you the reference to the rim. A local backing — say #14181D at 85% opacity, composite over the sunlit band — yields roughly #33332F behind the letters, and white on that comes to 12.68:1. Comfortable, with margin. But the plate now covers the sunlit band, which is the part of the photograph the treatment presumably wanted.

Adjusting the image is the fourth option. Darkening the whole photograph so the sunlit band drops to roughly #7A6F50 brings white text there to 4.97:1 — a pass, by a hair, achieved by flattening the entire image and pushing the shadowed two-thirds toward mud. Compare the costs honestly: the backing buys 12.68:1 inside a small area; global darkening buys 4.97:1 across the whole page and charges the treatment's mood for it.

Whichever repair you pick, recheck where it tapers. A feathered scrim is the natural version of the backing, and its edges are exactly where the protection runs out. If that same backing fades to 40% opacity at its outer boundary over the sunlit band, the composite becomes about #918564, and white on it falls to 3.65:1. The letters near the feather fail while the letters at the center of the plate pass comfortably. Look at the transition and the outer letters specifically, not just the middle, and treat a failing taper as an unfinished repair. Raising the outer opacity until the fade clears 4.5:1 would only enlarge the plate, since a taper that strong is no longer a taper. The cleaner fix is to run the backing's solid core past the last letter and let the fade land where no text sits.

And shrinking the copy is not a repair. Smaller text does not change the background it sits on, and it adds a legibility problem to the contrast problem.

Recheck what actually leaves the file

A repaired design file is a hypothesis about the delivered page. Test it by reopening the export in its intended route — the actual PDF, the actual rendered image in the actual slide — and inspecting the repaired region at the size the reader will encounter it.

Look at it at presentation size, not at 400%. A backing that reads as solid protection when you are zoomed in may be a three-pixel sliver in the delivered page.

Record the export and color settings alongside the measurement, because they are where the surprise usually comes from. The color profile embedded or assumed, the image compression, whether transparency was flattened, which PDF preset was used. A soft scrim built with a gradient or a shadow effect is the most likely thing to change: some export paths rasterize it differently, clip it, or drop it. If the export does not match the source layout, diagnose the export before declaring the source repaired. The two failures look identical on screen and have completely different fixes.

Then separate the two kinds of judgement in your notes. The mathematical comparison of two defined colors is one thing. Practical observations about thin letterforms, busy texture behind the text, line length and reading order are another, and they do not become resolved because the ratio cleared 4.5:1.

What to leave behind

For the worked page, the record after repair might read:

Note what that table distinguishes. Sample C passes now because the background immediately behind those letters changed. The underlying photograph still has a 1.54:1 relationship with white; the text simply no longer sits on it. If the layout later shifts, the failure comes back, and the record tells the next person where to look. The feather row is the record's one fail, and it stays visible deliberately: it marks the point at which the plate stops protecting the letters, and it is the entry someone would lose first by widening the passage or thinning the plate's edge.

The repaired region is what you end with: a specific passage, a specific background, a measured relationship, and a record of which samples were taken and which export was checked. Meeting the selected contrast criterion is one question about one pair of colors. Whether the whole treatment is usable — whether the image still communicates what it was chosen to communicate, whether the type remains readable at delivery size, whether the reading order makes sense to someone who never sees the layout — is a different question, and it is not settled by a number that passes.

Frequently asked questions

Why can a page pass a contrast check while words over a photograph are unreadable?

A page-average or whole-photo check may use a color that appears nowhere behind the letters. The text sits on a field of many background colors, and a bright patch under light text can fail even if the average passes. The relevant background is the one immediately behind the letters.

What should be recorded before measuring a text passage over an image?

Record the passage and its position, its delivered size and weight, the route it is delivered by, and the criterion. Use a number such as 4.5:1 for ordinary text rather than 'accessible,' and if rendered size is uncertain, measure against 4.5:1.

Where should background samples be taken for text over a photograph?

Inspect the text region, not the whole photograph. Sample the brightest patch under light text, the darkest patch under dark text, and the weak end of a gradient where it is closest to the foreground value. Record positions so another person can check. Keep foreground color separate from anti-aliased edge pixels; sample a stem center or read the design file.

Why can changing the text color fail when a passage crosses both shadow and sunlit areas?

In the worked example, no single foreground color can meet 4.5:1 against both the shadowed rock and the sunlit band. The sunlit sample caps foreground luminance, while the shadow sample pushes the required floor above that cap. Recoloring cannot work while the passage spans both, so moving, backing, or image adjustment is needed.

What should be checked after a contrast repair is made?

Reopen the delivered export in its intended route and inspect the repaired region at presentation size. Confirm the backing or adjustment survived export and check feathered tapers, where protection can drop below 4.5:1. A passing ratio does not cover stroke width, image noise, line length, or reading order.

Further reading

• Make a Company Deck Readable Without Flattening the Design — Compare this deck-focused check when contrast sits alongside qualifications, evidence and source lines; it treats contrast as one separate check among reading order and stored object sequence.