Skip to content
MasterMath

Colour Contrast Checker

Check whether text reads well on its background under the WCAG accessibility guidelines, which is what the law requires of public sector websites.

Contrast ratio

—

Large sample text

And this is normal text, the size used in an ordinary paragraph.

Contrast ratio—
WCAG level reached—
AA normal text (4.5:1)—
AA large text (3:1)—
AAA normal text (7:1)—
AAA large text (4.5:1)—

How this was worked out

    The formula

    contrast = (L1 + 0.05) ÷ (L2 + 0.05)

    Where it comes from

    Relative luminance is not apparent brightness: each channel is corrected by a curve and weighted by the eye's sensitivity, which is far greater to green than to blue. That is why a bright yellow and a deep blue can have contrasts quite unlike what the eye expects.

    How to work it out by hand

    1. Work out the relative luminance of each colour
    2. Add 0.05 to each
    3. Divide the larger by the smaller
    4. Compare against the thresholds: 4.5 for AA and 7 for AAA

    What is worth knowing

    Level AA at 4.5:1 is the minimum worth aiming at and the one public sector websites are held to in the EU and, in practice, under the accessibility rules of the UK, the US and Australia. Large text, from 18 point or 14 point bold, gets by on 3:1 because the strokes are thicker. The maximum possible contrast is 21:1, pure white on pure black.

    Frequently asked questions

    What contrast does text need to be accessible?

    4.5:1 for normal text and 3:1 for large text, under WCAG level AA.

    What is the maximum contrast?

    21:1, which is pure black on pure white.

    What counts as large text?

    From 18 point, or 14 point if it is bold.

    Is meeting WCAG compulsory?

    For public sector websites it effectively is across the EU, the UK, the US and Australia. Elsewhere it is a strongly recommended practice.