Anticode Open builder

Text on images: keeping words readable over photographs

Text over a photograph is readable only where the photo behind it is calm and dark (or light) enough. A gradient scrim under the words, text placed over the quiet part of the image, and a check of the real contrast at every crop make it reliable. A drop shadow alone rarely does.

Updated · By the Anticode team

Why text over image contrast is hard

Contrast between two flat colours has one answer. A photograph has thousands of colours, and the words cross many of them: white sky, dark hair, a bright window. WCAG's Contrast (Minimum) criterion still applies, and it's measured against what is actually behind the text: 4.5:1 for normal text and 3:1 for large text, which it defines as roughly 24px, or about 18.5px when bold. The W3C lists background images that don't give enough contrast as a known failure. So the real test of text on images readability isn't the average brightness of the photo but the worst spot under the letters.

Four ways to make it readable

Scrim
A semi-transparent gradient laid over the photo, darkest where the text sits and fading out elsewhere. It keeps most of the picture visible while guaranteeing a dark ground under the words. A gradient from about 60% black at the text edge to nothing works for most photos.
Placement
Put the words over the quiet part of the image: an empty wall, sky, water, a blurred background. This works when you control the photo; it breaks when a different crop moves the busy part under the text.
A panel
A solid or frosted box behind the text. Less atmospheric, but reliable whatever the photo does, and the right choice when owners will swap images later.
Text beside the image
Often the best answer. A split hero with the photo in one column and the headline in the other has no contrast problem at all.

Text shadows help at the edges of letters but don't fix low contrast across a whole headline, and soft shadows on body text make it look blurred. Use them, if at all, as a small addition to a scrim. Never set small body copy, prices or form labels over a photo; keep overlay text to a headline, one line of support and a button.

The crop problem

A background photo usually fills its box with object-fit: cover, which crops whatever doesn't fit. A wide hero on a laptop shows the left and right of the photo; the same hero on a phone, tall and narrow, shows a slice from the middle. The calm sky that sat behind the headline on a laptop may be replaced by a face or a shopfront sign on a phone, while the headline also wraps onto more lines and covers more of the image.

  1. Choose photos with a large calm area, not a detailed scene.
  2. Use object-position to keep the subject in view, for example object-position: 70% 50% to hold someone standing right of centre.
  3. Anchor the text where the scrim is darkest, usually the bottom left, so it doesn't drift into the subject as the box changes shape.
  4. Check the hero at three widths, such as 375px, 768px and 1440px, with the real photo, not a placeholder.
  5. Re-check whenever the photo changes. A seasonal image swap is the most common way overlay text breaks after launch.

Checking hero text readability

Contrast checkers need two colours, so sample the lightest pixel behind the text (with an eyedropper in your browser or image editor) and test the text colour against that. If it passes at the lightest point, it passes everywhere. Do this at each crop. Also try the page with images turned off or failed: the text colour needs a fallback background colour so white words don't land on a white page. For more on contrast ratios, see colour contrast for websites, and for choosing the pictures, website photography direction.

Overlay text in Anticode

Most of Anticode's hero layouts place the photo beside the headline, so the text sits on the design system's own ground colour and its contrast is set by the system's tokens. When a design-engine page uses a full-bleed photo hero, it lays two dark gradients over the photo, one across from the left and one down from the top and bottom, sets the headline and intro in white, and puts the at-a-glance facts on a dark translucent panel. The photo fills the hero with a cover crop.

In the layout editor you can layer an element over another and give it a surface backdrop, a near-solid panel in the page's ground colour, which is the safer choice for anything longer than a headline. Photos you upload are your own choice, so check them at phone width after adding them: the scrim is fixed, but what sits behind the words depends on the picture and the crop.

Questions people ask

How dark should an image overlay be?

Dark enough that white text passes 4.5:1 against the lightest part behind it. A gradient that is darkest under the text and fades elsewhere usually needs less darkening than a flat overlay.

Is a text shadow enough?

Rarely. It sharpens the edges of large letters but doesn't fix a light, busy background. Use it with a scrim, not instead of one.

Why is my hero text readable on desktop but not on my phone?

The crop changes. On a narrow screen a different part of the photo sits behind the text, and the headline wraps over more of it.

Sources

  1. Understanding SC 1.4.3: Contrast (Minimum), W3C, checked
  2. object-position, MDN Web Docs, checked