Skip to content
Accessibility Scanner

Free tool

Image and gradient contrast checker

Check whether text stays readable over a CSS gradient or a photo. Most contrast checkers compare two flat colours. This one finds the lowest-contrast point behind your text, which is the number that decides a WCAG pass or fail.

Your text

Any CSS colour: hex, rgb(), hsl(), oklch() or color().

Large text is 24px, or 18.66px when bold. It needs 3:1 instead of 4.5:1.

What sits behind it

Shows through transparent stops and transparent parts of an image.

Paste a gradient or colour exactly as it appears in your CSS. Linear, radial, conic, repeating and stacked layers all work.

Result

    How the lowest point is found

    For a gradient, the checker reads your CSS the way the browser does, finds every colour stop, and measures your text against each stop and against 47 points between each pair of stops.

    The points in between matter. Two colours that both pass can blend through a darker middle. Black text on a gradient from red to green passes at both ends and fails halfway across, because the browser mixes the two into a dim olive. The example button above loads exactly that case.

    Colours are mixed the way browsers mix them: in sRGB when the stops are hex, rgb(), hsl() or named colours, and in Oklab when any stop uses a newer format such as oklch() or color(), unless the gradient names its own colour space. Transparent stops are blended over the page colour before measuring.

    For an image, it measures every pixel under the text box, or an even grid of up to 250,000 points on a very large area, and reports the worst and the best. How the full scanner handles gradients and images on a live page is covered in resolving contrast over CSS gradients.

    What it can't tell you

    • Gradients mixed in a hue-based colour space (in hsl, in lch, in oklch and similar) are shown as estimates with no pass or fail.
    • Stacked gradients are measured as if any colour of one could sit behind any colour of another. That can only make the result stricter than the real page.
    • Image mode measures your file as loaded. Cropping, background-size and different images at different screen widths can change what sits behind the text on the live page.
    • It measures colour, not legibility. Thin type, text shadows and busy textures can make a passing ratio hard to read.
    • It uses the WCAG 2 contrast formula and does not score APCA.
    • A control can pass at rest and fail when focused. That needs a different check, described in fixing contrast that breaks on focus.

    Check a live page instead

    The full scan loads a real page, runs axe-core against WCAG 2.2 A and AA, and resolves contrast over gradients, background images and overlays for the text it finds. It is free and needs no signup.