Question 1

Why is contrast on gradients harder to ensure than solid colors?

Accepted Answer

A gradient continuously shifts color across the surface, meaning the contrast ratio between text and background changes at every pixel. A color pair that passes in the center may fail at the edges. The only reliable approach is to sample multiple points along the gradient and ensure each zone meets the required threshold.

Question 2

What does the contrast heatmap show?

Accepted Answer

The heatmap overlays color-coded zones on the gradient preview. Green zones indicate the contrast ratio meets WCAG 2.1 AA (≥4.5:1 for normal text). Yellow indicates the 3:1 UI/large-text threshold is met but not AA normal. Red zones indicate the contrast falls below 3:1 and is unsafe for any text.

Question 3

Which gradient types does the analyzer support?

Accepted Answer

The tool supports CSS linear-gradient, radial-gradient, and conic-gradient. You can configure direction, color stops, and positions. The analyzer samples contrast at regular intervals across the rendered gradient.

Question 4

How should I handle text placed over a gradient background?

Accepted Answer

The safest approach is to use a semi-transparent scrim (a dark or light overlay) under the text to guarantee a consistent background color. Alternatively, restrict text to zones where the gradient color is known to be safe, or use a solid fallback color for text containers. Never rely on a single sampled point — test the full range.

Gradient Analyzer