Text Over Images: How to Make It Readable and Pass WCAG

WCAG 1.4.3 Contrast (Minimum) sets a ratio between text and the background it is drawn on. On a flat colour there is one background and one number. On a photo or a gradient the background is different behind every letter, and the criterion has no rule for averaging, so the text has to meet the ratio against all of it. The part of the image with the least contrast is the part someone cannot read.

W3C documents this as a named failure, F83: background images that do not give text enough contrast. Its test starts with a quick check: compare light text with the lightest part of the image, or dark text with the darkest part. If that pair passes, the text passes everywhere. If it does not, you check the background directly behind each letter. The Understanding document adds two rules that matter here: ratios are not rounded, so 4.49:1 fails 4.5:1, and a wide halo around the letters counts as their background.

The examples build on one hero pattern: a real img positioned behind the text, so it can be cropped, art-directed and lazy-loaded. The photo here is mood, so it has an empty alt; if your image carries information, give it a description (see how to write alt text).

<section class="hero">
  <img class="hero__img" src="harbour.jpg" alt=""
       width="1600" height="900">
  <div class="hero__text">
    <h1 class="hero__title">Summer on the harbour</h1>
    <p>Boat trips every hour from 10am</p>
  </div>
</section>

1. A scrim or gradient overlay

A scrim is a semi-transparent layer between the image and the text. It darkens (or lightens) every pixel by the same proportion, which pulls the brightest highlights down to a level the text can beat.

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 28rem;
  background-color: #1d2733; /* fallback, see fix 6 */
  color: #fff;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* The scrim */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(0 0 0 / 0.55);
}

.hero__text {
  padding: 2rem;
}

How to choose the opacity. There are two numbers worth knowing. The first is the smallest opacity that passes for your actual image, which the checker works out from a screenshot. The second is a ceiling that passes for any image. With pure white text, the worst possible pixel is pure white, so if the overlay is strong enough to make white text readable on white, it is strong enough for everything. These are the ceilings, worked out with the WCAG formula:

So a 54% black overlay under white text passes 4.5:1 whatever photo an editor drops in later: pure white becomes about #757575, which is 4.6:1. Add a few points of margin for rounding, which is why the example uses 55%. The ceilings assume the overlay covers every pixel behind the text and that the text is pure white or pure black. Off-white text, a brand-tinted overlay or semi-transparent text all need measuring.

A gradient scrim keeps the rest of the photo bright by darkening only where the text sits. The common mistake is sizing the gradient as a percentage of the whole hero: on a phone the text wraps onto more lines and climbs into the faded part. Put the gradient on the text block instead, solid behind the text and fading only in the top padding:

.hero__text {
  padding: 4rem 2rem 2rem;
  /* 60% black behind every line of text,
     fading out only in the top 4rem of padding */
  background-image: linear-gradient(
    to top,
    rgb(0 0 0 / 0.6) calc(100% - 4rem),
    rgb(0 0 0 / 0)
  );
}

2. A solid text panel

A panel behind the text takes the image out of the equation. An opaque panel is a flat colour you can check with any contrast checker, it survives every crop, and the rest of the photo stays untouched. A semi-opaque panel follows the same opacity ceilings as an overlay. For a headline that wraps, a highlight that follows each line looks lighter than a box.

.hero__panel {
  max-width: 36rem;
  padding: 1.25rem 1.5rem;
  background-color: rgb(15 23 42 / 0.88);
  color: #fff;
  border-radius: 0.5rem;
}

/* A highlight that follows each line of a wrapped headline */
.hero__title span {
  background-color: #0f172a;
  color: #fff;
  padding: 0.1em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

3. text-shadow: when it is enough and when it is not

The Understanding document for 1.4.3 treats a wide border or halo around the letters as their background, while a thin outline counts as part of the letter. So a dark halo that fully surrounds every stroke can supply the contrast the image cannot. The usual decorative drop shadow does not: it is offset to one side, so one edge of every letter still touches the photo, and its blur fades to almost nothing a pixel or two out.

/* Not enough: offset, soft and faint */
.hero__title {
  text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4);
}

/* A halo: stacked shadows that surround every stroke */
.hero__title {
  color: #fff;
  text-shadow:
    0 0 2px #000,
    0 0 4px #000,
    0 0 8px #000,
    0 0 12px rgb(0 0 0 / 0.8);
}

A halo can be enough for a large, bold headline over a moderately busy image, once you have measured a screenshot of it. It is not enough for body copy or small text, where a halo muddies the letter shapes, or over very bright, detailed images. And it disappears completely in Windows contrast themes, which remove text shadows (fix 7 covers what happens instead). Use it as a finishing touch, not your only defence.

4. Move the text onto a calm area

The cheapest fix is composition. Choose images with a large, even area (sky, wall, water, shadow) and keep that area behind the text with object-position. When one crop cannot serve every width, art-direct a different image for small screens, or stop overlapping altogether and stack the text under the photo.

/* Keep the calm water behind the text */
.hero__img {
  object-position: 30% 50%;
}

@media (max-width: 40rem) {
  .hero__img {
    object-position: 60% 20%;
  }
}

/* Or stop overlapping on small screens:
   the text sits on the fallback colour below the photo */
@media (max-width: 40rem) {
  .hero { display: block; }
  .hero__img { position: static; height: 14rem; }
  .hero::before { display: none; }
}

<picture>
  <source media="(max-width: 40rem)" srcset="harbour-tall.jpg">
  <img class="hero__img" src="harbour-wide.jpg" alt="">
</picture>

5. Darken or blur the image

The most dependable version of this is editing the image file itself: export it darker, or pull down the highlights in the area behind the text. That costs nothing at runtime and looks the same everywhere. In CSS, a brightness() filter darkens the whole image, and a backdrop-filter blur on the text panel calms busy texture. Blur on its own is not a contrast fix, though: a blurred white cloud is still white. Pair it with a tint and measure the result.

.hero__img {
  filter: brightness(0.6);
}

.hero__panel {
  background-color: rgb(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

6. A background colour for when the image fails

Images do not always load: slow connections, data savers, blocked requests, CDN outages, and the moment before a lazy-loaded image arrives all leave the text on whatever is behind the image. White text over a missing image usually ends up on white. W3C failure F24 warns against setting a text colour without a background colour, and notes that you should think about contrast for when the image is not displayed. Give the element behind the image a solid colour that passes with the text on its own: in the hero above, #1d2733 gives white text 15.1:1. With a CSS background image, put the colour in the same shorthand.

.banner {
  /* The colour shows until, or instead of, the image */
  background: #1d2733 url("harbour.jpg") center / cover no-repeat;
  color: #fff;
}

7. Forced colours and increased contrast

In forced colours mode, which Windows contrast themes switch on, the browser replaces your colours with the user's and, as MDN's forced-colors reference describes, removes text-shadow and box-shadow and drops background images that are not loaded with url(). So a gradient scrim vanishes while the photo stays. To keep text readable, browsers paint a solid backplate behind it. Two rules follow: never set forced-color-adjust: none on hero text, which switches the backplate off, and if you want a guaranteed panel, give the text block system colours.

prefers-contrast: more matches when someone has asked their system for more contrast, such as Increase contrast on macOS. It is a cheap moment to strengthen the overlay or switch to a solid panel.

@media (prefers-contrast: more) {
  .hero::before {
    background-color: rgb(0 0 0 / 0.75);
  }
  .hero__panel {
    background-color: #0f172a;
  }
}

@media (forced-colors: active) {
  .hero__text {
    background-color: Canvas;
    color: CanvasText;
  }
}

Text baked into the image file, such as a promotional banner exported from a design tool, cannot be fixed with CSS: an overlay darkens the letters along with the photo. Contrast has to be right in the artwork itself, the alt text has to repeat the words, and the text blurs when zoomed and cannot reflow. 1.4.5 Images of Text asks for real text wherever the design can be achieved with it, with logos the main exception. Live text over an image is almost always the better build.

Carousels multiply the problem: every slide puts a different image behind its text, so every slide needs its own check. A carousel that advances on its own for more than five seconds also needs a way to pause or stop it under 2.2.2 Pause, Stop, Hide, and its arrows and dots over the image need 3:1 under 1.4.11. The accessible carousels lesson covers the rest.

Video backgrounds are the extreme case: the background changes many times a second. Use an overlay at the ceiling opacity or a solid panel, because you cannot measure every frame, and give people a way to pause motion that runs for more than five seconds.