# Background for text: what makes words easy to read

[Canonical HTML page](https://gradiently.design/guide/gradient-background-for-text)

Some backgrounds carry words effortlessly and some fight every letter. The difference comes down to three properties you can check in a minute.

## The short version

- A good background for text has three properties where the words sit: enough contrast, little fine detail and a narrow range of tones.
- WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Detail about the same size as the letters, such as foliage, crowds or busy patterns, harms reading more than colour does.
- Squinting at a design, blurring it or viewing it in greyscale shows quickly whether the text area is calm enough.
- Moving the words to a calmer part of the background is usually better than adding a box or shadow behind them.

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](https://webaim.org/resources/contrastchecker/) calculates it for any two colours.

| Text | Background | Contrast ratio | Verdict |
| --- | --- | --- | --- |
| White `#ffffff` | Deep indigo `#1e1b4b` | 16:1 | Excellent at any size |
| White `#ffffff` | Violet `#7c3aed` | 5.7:1 | Passes for body text |
| White `#ffffff` | Slate `#64748b` | 4.8:1 | Just passes |
| White `#ffffff` | Pink `#f472b6` | 2.6:1 | Fails, even for large text |
| Near black `#1a1a1a` | Pink `#f472b6` | 6.6:1 | Passes: same pink, darker ink |
| White `#ffffff` | Orange `#fb923c` | 2.3:1 | Fails |

Real ratios for common pairings. Bright pinks, oranges, yellows and light teals need dark text, however much white text feels right on them.

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](https://gradiently.design/guide/color-contrast-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.

- Smooth: carries text well: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- One soft light: words go low left: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fine stripes: fights every letter: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Small rings: unreadable: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

The same two colours four ways. The top pair carries words easily; the bottom pair has detail at letter scale and makes any text a struggle.

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](https://gradiently.design/guide/type-on-busy-backgrounds) covers patterns in more detail, and [readable text on photos](https://gradiently.design/guide/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.

A portrait post where the headline runs across light and dark areas of a gradient and parts of it are hard to read

The headline crosses light and dark parts of the background, so some letters vanish whatever the ink colour.

The same post with a calm, evenly toned area of the gradient behind the headline so every letter reads

The same background with an even, deeper region behind the words. One ink colour now works for every letter.

## How to test any background for text

1. **Squint** Half close your eyes. Detail fades and only tone remains. If the words dissolve into the background, contrast is too low.
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. **View it in greyscale** Colour can trick you into thinking contrast is fine. Greyscale shows lightness alone, which is what readability depends on.
4. **Check the extremes** Measure contrast at the lightest and darkest points behind the words, not the average.
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.

### Try first

- Move the words to the calmest part of the background
- Crop or reposition the background so a calm area sits behind them
- Switch ink: dark text on light regions, light on dark
- Make the type larger and heavier
- Deepen or lift the background only around the words

### Use sparingly

- Solid boxes or bands behind text
- Drop shadows on letters
- Outlines around letters
- Heavy blur over the whole image
- A dark overlay on the entire background

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.

```css
.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;
}
```

Deepens the left side, where the headline sits, and fades to nothing by 70 percent across. Check contrast at the lightest point behind the text.

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](https://gradiently.design/guide/auto-ink-legibility) explains the details, and [text on a gradient](https://gradiently.design/guide/text-on-gradient) gives the manual method for any gradient.

## FAQ

### What is the best background colour for text?

Any colour that contrasts strongly with the text, at least 4.5:1 for normal text. Very light or very dark backgrounds are easiest; bright mid tones such as pink, orange and yellow need dark text.

### What contrast ratio does text need?

WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.

### Why is my text hard to read even though the contrast passes?

The background probably has detail close to the size of the letters, or light and dark patches under the same line. Move the words to a calmer, more even area.

### How do I make text readable on a busy background?

First move the words to the calmest area or reframe the image. If that isn't possible, deepen or lift only the area behind the text, and use boxes or shadows as a last resort.

### Is white or black text easier to read on colour?

It depends on the colour's lightness. Dark colours need white text; light and bright colours usually read better with near black.