Readable Text Over Gradients: Scrims, Worst Points, and What Fails

Gradient hero, white headline — the default look of the modern web. And a quiet accessibility trap, because a gradient has no single contrast ratio. Your text sits on a different background color at every point, and it only takes one bad point for a real reader to lose the sentence.

Passing on average, failing where it counts

Against the dark left edge this passes AAA; against the pink right edge it fails everything.

The mistake is checking contrast against “the” background color — usually the first stop, or whatever the design tool sampled. The honest question is: what is the worst contrast anywhere the text can sit? That worst-point number is the one that has to clear 4.5:1.

Fix 1: pick the caption color by worst case

Sometimes the fix is free: sample the gradient at many points, compute the minimum ratio for white text and for black text, and use whichever color has the better minimum. On light, airy gradients black usually wins even when white looks more stylish.

Fix 2: the scrim

When neither black nor white survives every point — typical for gradients that swing from dark to light — put a scrim between the gradient and the text: a semi-transparent layer that compresses the background’s range.

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 45%), rgb(0 0 0 / 45%)),
    linear-gradient(90deg, #0b486b, #f2c1d1);
}

The scrim dims the light end far more than it changes the dark end, pulling the whole range under your text. 30–50% black (or white, for dark text) handles most gradients; compute the exact minimum instead of guessing.

What doesn’t work

• Text shadows. A soft shadow adds a halo, not a background — WCAG has no “shadow bonus,” and at body-text sizes shadows blur letterforms more than they help.
• Checking one end of the gradient. The failure is always at the other end.
• Making the text bigger instead. Large text still needs 3:1 at every point — size buys margin, not immunity.