Why does my offer text pass a contrast check on one part of a photo but become unreadable elsewhere?

Measure the background that each letter actually crosses

A product photograph rarely has one uniform background color. A white offer headline may sit over dark fabric at its beginning and cross a bright reflection near its final word. Sampling the dark fabric alone can produce a reassuring contrast ratio while overlooking the unreadable letters.

W3C WCAG 2.2 Understanding Success Criterion 1.4.3 specifies a contrast ratio of at least 4.5:1 for ordinary text and 3:1 for qualifying large text, subject to its stated exceptions. These ratios concern the text and its actual background, not an average color calculated from the photograph.

Mark the complete text footprint, including both lines, punctuation and any translated wording. Inspect the background directly adjacent to the characters wherever it changes significantly. A dark corner outside the headline does not help letters positioned over a pale label.

Evaluate the rendered colors after any overlay, transparency or blending treatment. A translucent backing plate cannot be assessed from its nominal CSS color alone because the underlying photograph contributes to the final appearance.

Keep the intended text role clear. A promotional price or offer condition needs readable presentation; a decorative logo is treated differently under the cited criterion. Do not apply the logo exception to ordinary offer text simply because it uses the brand font.

Compare three remedies without changing the offer

Prepare three versions of the same approved words at the same intended reading size. Change only the treatment being investigated.

• Repositioning: move the headline to a quieter region that remains suitable at the required layouts.
• Backing plate: place a sufficiently opaque, restrained color field behind the complete text footprint.
• Native text: present the offer in the page layout outside the photograph, where the theme can control text and background together.

Repositioning preserves more of the photograph but may cover a product feature at another crop. A backing plate can stabilize contrast but must not hide essential merchandise details. Native text can be more adaptable to zoom, language and responsive changes, although the actual theme must implement and test it.

For each candidate, inspect both the measured contrast and whether the product remains recognizable. A technically readable headline that obscures the only visible closure mechanism is not a satisfactory product presentation.

Hypothetical example: a discount over a reflective bottle

Hypothetical example; no contrast measurement or browser test was performed. A fictional bottle advertisement places the words 'Save 15% on the bottle' across a dark studio background. The right-hand word overlaps a bright reflection from the bottle.

Candidate A measures only the dark background behind 'Save' and reports that the headline passes. That observation cannot establish contrast behind 'bottle'.

Candidate B moves the headline to a dark area at desktop width. However, the stipulated mobile crop shifts the reflection behind the second line, reopening the problem.

Candidate C places the same offer in native text beneath the photograph, using a controlled text and background combination. In this fictional design, C is the preferred direction because it removes the changing photographic background from the text treatment.

The exercise supplies no actual color values, so it makes no numerical pass claim. The merchant must measure the rendered candidate in the real destination.

Inspect responsive crops and the delivered asset

Review the actual desktop, tablet and mobile presentations supported by the destination. Record the displayed crop, headline wrapping, background treatment and any nearby interface controls.

If the words are embedded in a raster image, the merchant cannot assume the theme will reflow them independently. A different crop may remove part of the offer or put the text over a new background. Rebuild the creative or separate the text when that behavior cannot be controlled.

For native text, inspect the rendered page rather than relying on a design mockup. Test browser zoom, narrower widths and the longest approved translation. Confirm that a backing plate extends beneath every line and does not become transparent over a new photograph.

W3C's guidance supports the contrast criteria, while the footprint-and-crop comparison is an editorial diagnostic procedure. It is not a substitute for reviewing all applicable accessibility requirements.

Keep the approved offer wording and the reviewed export or page version together. Recheck when the photograph, headline, crop or theme changes.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• W3C WAI — Understanding Contrast (Minimum): Primary basis for text contrast ratios, qualifying large text, exceptions and the relationship between text and background luminance.
• W3C WAI — Understanding Images of Text: Supports distinguishing embedded promotional lettering from adaptable native text.