Why does gradient text pass in my design tool but fail an accessibility audit?

Design tools usually sample one pixel or the average color. WCAG requires every glyph to contrast with the pixels directly behind it — and on a gradient, every glyph sits on a different color. Auditors score the weakest stop, which is exactly what our gradient checker reports.

Can white text over a light gradient ever pass?

Practically no. If the lightest stop can't reach 4.5:1 even with a dark scrim, the gradient can't stay behind the text — use a solid chip or move the text to a darker region. Fixing by adding more and more overlay defeats the point of the gradient.

Does text-shadow fix gradient contrast?

Don't rely on it. Shadows are blurred halos that vary across the gradient and can't be measured reliably, so auditors won't accept them as a fix. Use a scrim or a solid chip instead.

What's the fastest way to check my gradient?

Use ContrastLab's free gradient contrast checker: enter your two gradient colors and text color, and it scores the WCAG contrast ratio at 41 sampled points, highlights the weakest stop, and grades AA/AAA against it.

Will compressing a gradient change my brand colors?

Darkening a stop changes the color you ship, so check brand guidelines first. If the gradient must stay untouched, keep it purely decorative and put the text on a solid chip instead — that's the fix that preserves the design exactly.

How to Make Text Readable Over a Gradient

Heroes, banners, and cards love gradients — but text over a gradient only needs one weak spot to fail accessibility. This guide shows why it happens and four fixes that actually work, each with real WCAG contrast numbers computed before and after.

The problem: one weak spot fails the whole gradient

A solid background has one contrast ratio. A gradient has as many as there are pixels. Take white text on a purple gradient, sampled at the start, middle, and end (colors interpolated linearly in sRGB, the same math browsers use for CSS linear-gradient()):

Gradient stop	White text contrast	WCAG AA (≥ 4.5:1)
#4A6CF7 (start)	4.39:1	Fail
#725BF7 (middle)	4.61:1	Pass
#9B4AF7 (end)	4.45:1	Fail

The middle passes, both ends fail — and because every glyph must be readable, the whole thing fails. Averaging hides this. Accessibility is graded on the weakest point, never the mean. Now the fixes.

Fix 1 — Compress the gradient

Darken the lighter stop (or lighten the darker one) so the weakest stop clears 4.5:1. Darkening both stops of the example to #3B55D6 → #5A2BD6:

Compressed stop	White text contrast	Verdict
#3B55D6 (start)	6.08:1	AA
#4A40D6 (middle)	7.01:1	AA + AAA
#5A2BD6 (end)	7.63:1	AA + AAA

The gradient keeps its purple character, and every stop now passes AA. Trade-off: you are shipping slightly different colors — check brand guidelines before darkening.

background: linear-gradient(135deg, #3B55D6, #5A2BD6);

Fix 2 — Add a scrim behind the text

A semi-transparent dark layer behind the text evens out contrast without killing the gradient — the standard fix for photo and gradient heroes. A 50% black scrim over the middle stop #725BF7 produces #392E7C, on which white text scores 11.32:1 — a comfortable AAA pass.

.hero-text { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)); /* layer it behind the text, over the gradient */ }

Tip: a scrim only needs to cover the text area. A full-bleed overlay darkens more of the design than necessary.

Fix 3 — Put the text on a solid chip

If the gradient must stay pixel-perfect (brand colors, marketing art), keep it purely decorative and put the text on a solid card or chip. White text on a #16162B chip scores 17.74:1 — AAA with headroom to spare. This is the only fix that preserves the original design exactly.

Fix 4 — Reposition the text (works only sometimes)

If part of your gradient already passes, move the text there. In our example the darkest stop reaches only 4.61:1 — barely AA, nowhere near AAA — so repositioning alone can't rescue this gradient. Treat it as a finishing touch after one of the fixes above, not a fix on its own.

Quick checklist before you ship

Score every stop of the gradient, not just the endpoints.
Grade AA/AAA against the weakest stop.
Re-check after any design tweak — one hue change can move the weakest spot.
Run the result through the color blindness simulator — gradients that rely on hue shifts can vanish for some users.
Check the palette pieces with the palette generator if you compressed the gradient.

Check your gradient in 10 seconds

Enter your gradient colors and text color — the free checker scores 41 sampled stops, finds the weakest point, and grades AA/AAA against it.

Open the Gradient Contrast Checker