Text on gradient background: how to make it read every time

To put text on gradient background colours so it always reads, place the words over the gradient's calmest stretch, choose light or dark ink by the lightness of the colour directly behind them, keep small text off mid-tones, and test contrast at the worst point, not the average. Size and weight do the rest: large, sturdy type survives a changing background that thin, small type can't.

Why text on a gradient is harder than it looks

On a flat colour, contrast between text and background is one number. On a gradient, it changes along the blend. White type can be crisp against the dark end and nearly invisible against the light end, sometimes within a single word. The gradient below shows how quickly that happens.

The thresholds come from the WCAG contrast guidance: 4.5:1 for normal text and 3:1 for large text, roughly 24 pixels and above, or about 19 pixels in bold. Colour contrast explains the rules in plain words.

Step 1: find the calm zone

Every gradient has stretches where the colour changes slowly and stretches where it changes fast. Text belongs in the slow part, because the contrast under it stays nearly constant. On a linear gradient that's usually one end; on a radial gradient it's the centre or the outer edge; on a mesh or aurora it's whichever pool of colour is largest and most even.

If you control the gradient, build the calm zone in: hold a colour for longer by repeating a stop, as the first example does. If the gradient is given to you, move the text rather than fighting it.

Step 2: choose ink by lightness, not hue

Contrast is about lightness. A vivid violet and a vivid orange can look equally strong, yet white reads well on the violet and poorly on the orange, because the orange is much lighter. When choosing ink, ignore the hue and ask: is the colour behind this line dark or light?

Tinted inks feel more considered than pure white and black. Take a very pale tint of the gradient's lightest colour and a very deep shade of its darkest; they carry the palette into the type and usually have enough contrast. Muddy gradients explains why mid-blends lose lightness contrast in the first place.

Step 3: stay out of the mid-tone trap

Look at the magenta row in the table: 4.7:1 with white and 4.2:1 with near-black. Neither ink has much to spare. Mid-lightness colours sit in the middle of most gradients, which is exactly where people tend to centre their text. Small text there will be marginal whichever ink you choose.

• Move the text towards the darker or lighter end.
• Shift the gradient so the stop behind the text is darker or lighter.
• Make the text large and bold, so the lower 3:1 threshold for large text applies.
• Reserve the mid-tones for decoration, shapes and space, not words.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Step 4: use size and weight

Heavier, larger letters have more area and are read as shapes, so they tolerate a changing background better. Hairline and light weights break up as the colour behind them shifts. On a gradient, set body text in regular, medium or bold rather than light weights, and keep headlines generous. Fonts for social media lists sturdy faces that read on phones.

Step 5: test at phone size and in greyscale

1. 1

   Measure the worst spot

   Sample the lightest colour behind light text, or the darkest behind dark text, and check the ratio.

2. 2

   View it in greyscale

   Desaturate a copy of the design. With the hue gone, weak lightness contrast is obvious.

3. 3

   Look at it on a phone

   At arm's length, in daylight if you can. Small text on gradients fails there first.

4. 4

   Squint

   Half-close your eyes. The text should still stand apart from the background as a shape.

For backgrounds that are busier than a gradient, like photos and textures, see type on busy backgrounds. In Gradiently, Marks move their calmest region behind the words, and Auto ink picks light or dark type for each line from the Mark's own palette, so the method above happens as you type.