Check text/background colour contrast against WCAG AA and AAA — exact ratio and pass/fail verdicts.
How to use this tool
The foreground hex, e.g. #2E2A26.
The background hex, e.g. #F8F5EC.
21.00 is the maximum; 1.00 means identical colours.
AA and AAA are shown separately for normal and large text.
Formula & worked example
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).
