Contrast Checker
Check any text/background color pair against WCAG contrast rules — get the exact ratio plus AA/AAA pass/fail for normal and large text.
Enter a foreground and background color to compute the WCAG 2.x contrast ratio with the official relative-luminance formula. The checker reports pass/fail against all four thresholds — AA and AAA for normal and large text — and shows a live preview of how your text actually looks.
Sample heading text
This is how normal body text looks in your foreground color on your background color. Large text is 18pt+ (24px) or 14pt+ (18.66px) bold.
How to use this calculator
- Enter your text (foreground) color as HEX, or pick it visually.
- Enter the background color the text will sit on.
- Read the contrast ratio — higher is better, 21:1 is the maximum.
- Check the four pass/fail badges for AA and AAA, normal and large text.
- Preview the sample text to see the pairing with your own eyes.
The formula
Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05), where L is relative luminance: L = 0.2126R + 0.7152G + 0.0722B after gamma correction (WCAG 2.x).
Worked example
Black text (#000000) on white (#ffffff) scores 21.00:1 — the maximum — passing AAA for all text sizes. Medium gray #767676 on white scores 4.54:1, which passes AA for normal text but falls short of the 7:1 AAA bar.
Frequently Asked Questions
What is a good contrast ratio for text?
WCAG requires at least 4.5:1 for normal text and 3:1 for large text at AA level, the standard most laws and policies reference. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. Black on white scores 21:1, the maximum possible; anything below 3:1 fails every criterion.
What counts as 'large text' in WCAG?
Large text is 18pt (24px) or larger, or 14pt (18.66px) or larger when bold. Because bigger, bolder letterforms are easier to resolve, the contrast requirements drop: 3:1 for AA and 4.5:1 for AAA. This checker tests both sizes separately so you know exactly where each pair stands.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its RGB channels with a gamma correction — the WCAG formula weights green most, then red, then blue, matching human vision. The ratio is (lighter + 0.05) / (darker + 0.05). This tool implements that exact formula, so its numbers match official WCAG validators.
My brand color fails AA on white. What now?
Darken the text color or lighten the background until the ratio clears 4.5:1 — small lightness shifts usually suffice without changing the hue. Alternatively, reserve the brand color for large headings or graphic elements (which only need 3:1) and use a darker tint for body text. Never rely on color alone to convey meaning; pair it with labels or icons.
Is AA compliance legally required?
In many jurisdictions, effectively yes: the ADA in the US, the European Accessibility Act, and similar laws are interpreted against WCAG 2.x AA. Lawsuits over inaccessible websites increasingly cite color contrast specifically. AA is the widely adopted safe target; AAA is a bonus for critical content.