How is contrast across a gradient calculated?

The tool interpolates the gradient colour in sRGB at evenly spaced positions, computes WCAG relative luminance for each, then applies the (L1 + 0.05) / (L2 + 0.05) contrast formula against your text colour. Each sample point gets its own ratio.

Why does the middle of my gradient fail but the ends pass?

Contrast is not linear across a gradient. Two readable endpoints can blend through a midtone that sits too close to your text luminance, so a band in the middle drops below the threshold even though the ends look fine.

What threshold should I use?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular). AAA raises these to 7:1 and 4.5:1. Pick the level and size that match your real UI.

Does it support multiple gradient stops?

Yes. It parses each colour stop and its position, then interpolates between adjacent stops so a three- or four-colour gradient is sampled correctly across its full width.

Is interpolating in sRGB accurate?

Browsers render legacy linear-gradient() in sRGB by default, so sampling in sRGB matches what users actually see. If you opt into an OKLCH or LAB interpolation colour space, the real midtones will differ from this estimate.

Gradient Text Accessibility Checker

A gradient that reads perfectly at its two ends can hide an unreadable band in the middle. Because contrast is non-linear, two safe endpoints can blend through a midtone that sits dangerously close to your text colour. This tool samples contrast at points across the whole gradient, shows you the ratio at each, and marks exactly where text fails your chosen WCAG threshold.

How it works

Your linear-gradient is parsed into ordered colour stops with positions (evenly distributed if positions are omitted).
At each sample position from 0% to 100%, the background colour is interpolated in sRGB between the two surrounding stops.
For that sampled colour and your text colour, the tool computes WCAG relative luminance (sRGB linearisation, then 0.2126 R + 0.7152 G + 0.0722 B).
Contrast is (L_lighter + 0.05) / (L_darker + 0.05), and each sample is compared against the threshold you select (4.5:1, 3:1, or 7:1).

Any sample below the threshold is highlighted, so a failing band shows up as a run of red samples even when both ends pass.

Example

The gradient linear-gradient(90deg, #1a1a2e, #e94560) with white text passes at the dark navy end (high contrast) but the bright #e94560 end drops near 3.3:1, failing AA for body text. The strip makes the failing right-hand portion obvious, so you darken that stop or switch to a large-text threshold.

Tips

Keep your text colour at a consistent luminance extreme (near-white or near-black) and let the gradient stay on the opposite side.
If a midtone fails, nudge the offending stop’s lightness rather than the endpoints — it fixes the band without changing the look at the edges.
Large display text can use the 3:1 threshold, but never apply that to body copy.
All sampling is done locally in your browser; nothing is uploaded.