Gradient Contrast Checker
Check text over a gradient at every point it touches, not just the average. See where it fails, and get the overlay that fixes it.
Readable on every pixel?
Why the average colour lies
Most contrast checkers compare two flat colours. Put text on a gradient and the usual shortcut is to check it against the gradient’s average — but text does not sit on the average, it sits on every colour underneath it. A yellow-to-red gradient can average out to a passing ratio for white text while the yellow end is close to unreadable.
This checker measures your text colour against every point in the area the text covers and reports the worst one, which is the one that decides whether people can read it.
The numbers
- Worst point — the lowest contrast anywhere under the text. This is the verdict.
- At the average colour — what a two-colour checker would tell you, for comparison.
- Of the area passes — how much of the zone meets the target. The red heatmap shows the rest.
WCAG 2 asks for 4.5:1 for body text and 3:1 for large text (24px, or about 19px bold) at level AA; 7:1 and 4.5:1 for AAA.
Fixing a gradient that fails
The quickest fix that keeps the gradient is a tint layered over it: a translucent black under light text, or white under dark text. The checker finds the lowest opacity that lifts the worst point over the line, so the gradient keeps as much of its colour as possible, and gives you the CSS. Other options: move the text to the gradient’s darker (or lighter) end with the zone buttons, switch text colour, or pick a calmer gradient in the Gradient Generator.