Contrast Checker
Check the WCAG contrast ratio between a text color and a background color.
Last updated
Large text preview (24px)
Normal text preview (16px) — the quick brown fox jumps over the lazy dog.
21.00:1
Contrast ratio
—AA — Normal text (4.5:1)
—AA — Large text (3:1)
—AAA — Normal text (7:1)
—AAA — Large text (4.5:1)
The formula
WCAG's contrast ratio compares relative luminance: (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the lighter and darker color's luminance and each channel is gamma-corrected before being weighted (0.2126×R + 0.7152×G + 0.0722×B) — this is why the ratio isn't simply "how different the colors look." "Large text" means 18pt+ (24px) regular weight or 14pt+ (~18.7px) bold; everything else counts as normal text and needs the stricter ratio.
Nothing entered here is sent to a server — the entire calculation runs as JavaScript in your browser tab.