Gradient Contrast Checker
Text over a gradient only needs one weak spot to fail accessibility. Enter your gradient and text color — the checker scores the WCAG contrast ratio at every point, highlights the weakest stop, and grades AA/AAA against it.
Weakest & strongest points
Contrast at every stop
Each cell is a sampled point of your gradient; the number is its contrast ratio against your text color.
Why gradients break contrast
A solid background has one contrast ratio. A gradient has as many as there are pixels — and users read the weakest one. A white headline over a blue-to-light-blue hero can hit 8:1 at the left edge and 1.8:1 at the right. Averaging hides this; the weakest point is what matters. That is why this checker grades against the minimum, not the mean.
Fixing a failing gradient
- Compress the gradient: darken the light end or lighten the dark end so the weakest stop stays above 4.5:1.
- Add a scrim: a semi-transparent dark layer behind the text evens out contrast without killing the gradient look — the standard fix for photo and gradient heroes.
- Solid fallback: put the text on a solid chip, card, or overlay band and let the gradient stay purely decorative.
- Re-check the palette pieces with the palette generator, and test the result with the color blindness simulator.
Want the full walkthrough with real before/after numbers? Read the guide: How to Make Text Readable Over a Gradient.
How the math works
Your two colors are interpolated linearly in sRGB at 41 evenly spaced stops — the same math browsers apply to CSS linear-gradient(). Each stop's contrast against your text color uses the WCAG 2.1 relative luminance formula. No uploads, no tracking: it all runs in your browser.
FAQ
Why does text over a gradient fail accessibility?
A gradient's color changes along its length, so the contrast ratio changes too. Text that passes at the dark end can fall well below 4.5:1 at the light end. This tool finds the weakest point — your text must be readable everywhere, not just on average.
Which verdict should I trust — worst, average, or best contrast?
The worst. Accessibility is about the hardest-to-read part of your design. This checker grades AA and AAA against the minimum contrast ratio along the whole gradient.
How is the gradient sampled?
The gradient is linearly interpolated in sRGB between your two colors — the same math browsers use for CSS linear-gradient — and scored at 41 evenly spaced points using the WCAG 2.1 contrast formula.
How do I fix a gradient that fails?
Three common fixes: (1) darken the light end or lighten the dark end of the gradient, (2) add a semi-transparent dark overlay behind the text, or (3) keep the gradient decorative and put text on a solid chip or card.
Is my gradient data uploaded anywhere?
No. Everything runs locally in your browser; no colors, no analytics, no tracking.