Contrast Checker

Check text/background colour contrast against WCAG AA and AAA — exact ratio and pass/fail verdicts.

100% FreeNo sign-upPrivate — runs in your browser
—
Sample text at this contrast
Verdict
—
AA normal
—
AAA normal
—
AA large
—
AAA large
—


        
Copied to clipboard

How to use this tool

1
Enter the text colour

The foreground hex, e.g. #2E2A26.

2
Enter the background colour

The background hex, e.g. #F8F5EC.

3
Read the ratio

21.00 is the maximum; 1.00 means identical colours.

4
Check the verdicts

AA and AAA are shown separately for normal and large text.

Formula & worked example

WCAG relative luminance: each sRGB channel is linearised (c/12.92 below 0.03928, otherwise ((c+0.055)/1.055)^2.4), then L = 0.2126R + 0.7152G + 0.0722B. Contrast = (Llighter + 0.05) / (Ldarker + 0.05). AA needs 4.5:1 (normal) or 3:1 (large); AAA needs 7:1 (normal) or 4.5:1 (large).

Black text on white scores 21.00 : 1 (AAA). White text on white scores 1.00 : 1 (fail). A mid-grey like #767676 on white scores about 4.54 : 1 (AA normal, but not AAA).

Limitations — read this before you rely on it

This checks the WCAG 2.x contrast formula for solid colours only. Gradients, photos, transparency over varied backgrounds and font weight/rendering are not modelled; large-text thresholds use the WCAG size definitions.

Frequently asked questions

WCAG large text is 18pt (24px) or 14pt (18.66px) bold and above — it gets the lower 3:1 AA threshold.

AA is the legal and practical standard for most sites; AAA is stricter and ideal for body text.

No — contrast is about luminance difference, not hue. A pair can pass contrast yet confuse red-green colour vision; never rely on colour alone.

Check the darkest and lightest areas behind the text; a semi-transparent overlay behind text makes the result reliable.

(1 + 0.05) / (0 + 0.05) = 21 — white (luminance 1) against black (luminance 0).