Background for text: what makes words easy to read

A good background for text has three things in the area behind the words: strong contrast with the letters, very little fine detail, and an even range of tones rather than light and dark patches. Colour matters far less than people think. A violet gradient can carry text beautifully and a grey photo can ruin it, depending on those three properties. This guide shows how to judge any background, photo, gradient or texture, and what to do when one fails.

Contrast: the first property

Contrast is the difference in lightness between the letters and what is directly behind them. The Web Content Accessibility Guidelines set the measurable bar: a ratio of at least 4.5:1 for normal text and 3:1 for large text. WebAIM's contrast checker calculates it for any two colours.

On a flat colour, one check is enough. On a gradient or a photo, the background changes under each word, so check the lightest spot behind light text and the darkest spot behind dark text. That is where text fails first. Colour contrast and accessibility goes deeper into the standards.

Detail: why busy backgrounds are hard to read

Contrast is necessary but not enough. A background full of detail the same size as the letters makes reading hard even when the ratio passes, because the eye can't separate the shapes of letters from the shapes behind them. Leaves, gravel, crowds, fine stripes and small patterns are the worst offenders. Large, soft shapes are the best: a sky, a blurred wall, a smooth gradient.

Texture is fine when its grain is much smaller than the letters, like film grain or paper tooth. It becomes a problem when the texture's features approach the size of the strokes in your type. If you love a pattern, scale it up until its shapes are clearly bigger than the letters, or keep it away from the words. Text on busy backgrounds covers patterns in more detail, and readable text on photos covers pictures.

Tone range: light and dark patches under one line

The third property is the one that catches people out. If a single line of text crosses both a light patch and a dark patch, no single text colour can work: white disappears on the light part and black on the dark. A good background for text keeps a narrow range of tones under each line, all light or all dark.

How to test any background for text

1. 1

   Squint

   Half close your eyes. Detail fades and only tone remains. If the words dissolve into the background, contrast is too low.

2. 2

   Blur it

   Put a heavy blur on a copy of the background alone. Whatever is left under the text area is the tone the letters really sit on.

3. 3

   View it in greyscale

   Colour can trick you into thinking contrast is fine. Greyscale shows lightness alone, which is what readability depends on.

4. 4

   Check the extremes

   Measure contrast at the lightest and darkest points behind the words, not the average.

5. 5

   Look at it on a phone

   At arm's length, in daylight, at the size people will actually see it.

Fixing a background that fights the text

Most fixes add something: a box, a shadow, a dark band. They work, but each one is a patch that makes the design look rescued. Try the fixes in this order, from least visible to most.

On the web, a gentle gradient overlay on one side of a hero image is a respectable version of the fifth fix: it deepens only the area under the words and leaves the rest of the picture alone.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently builds the least visible fixes into the background itself. A Mark knows where your words are: its calmest, best contrasting region moves behind the text, colours near the letters deepen or lift, busy detail relaxes, and Auto ink picks light or dark type for each line from the Mark's palette. There are no boxes, shadows or blur, and you choose how strongly it responds. How Auto ink works explains the details, and text on a gradient gives the manual method for any gradient.