• Success Criterion 1.4.3
  • Conformance level AA
  • W3C reference F83

Text Placed Directly Over a Photo With No Solid Backing

1.4.3 — Contrast (Minimum)

Scenario

Setting

A real-estate marketplace's listing page

What’s wrong

Text sits directly on a background photo without a solid overlay — in parts of the image the text becomes unreadable.

Example 

<div class="listing-hero" style="background-image:url(house.jpg)">
  <h1 style="color:#ffffff">3-Bed Colonial, $450,000</h1>
</div>
<!-- no overlay; the price sits over a light sky patch in the photo -->

Why it matters

A buyer scrolling on their phone can't read the asking price where the house photo's bright siding sits directly behind the white heading.

How to test

Use a contrast checker on text placed directly over a photo/background image with no solid overlay: check the lowest-contrast point across the image, not just one spot.

How to fix

Add a solid or semi-opaque scrim behind text on photos so contrast holds at roughly 7:1 regardless of the image underneath.

<div class="listing-hero" style="background-image:url(house.jpg)">
  <div style="background:rgba(0,0,0,0.55)">
    <h1 style="color:#ffffff">3-Bed Colonial, $450,000</h1>
  </div>
</div>

Outcome

The buyer reads the asking price clearly no matter which part of the listing photo sits behind it.

Who is affected

Low-vision users and anyone viewing the page outdoors, where reduced screen contrast makes marginal text harder to read.

Learn more

Related scenarios