π¨ WCAG Contrast Checker
Test any color pair against WCAG 2.1 AA and AAA standards.
Contrast ratio
Large text preview
Normal body text preview. The quick brown fox jumps over the lazy dog.
How to Use This Checker
Pick your text and background colors with the color pickers or paste hex codes directly. The tool instantly computes the WCAG contrast ratio, grades it against AA and AAA for both normal and large text, and shows a live preview. If the pair fails, the Suggest Fix button nudges the colors toward a passing combination.
Set the text (foreground) color and the background color.
Read the ratio and the four pass/fail badges: AA and AAA for normal and large text.
Check the live preview, then use Suggest Fix if anything fails.
WCAG Thresholds
AA is the legal and practical standard: it is what the ADA, Section 508, and the European Accessibility Act effectively require. AAA is the gold standard for maximum readability. Large text gets lower thresholds because bigger glyphs are inherently more legible.
How the Ratio Is Computed
WCAG defines relative luminance for each color, a weighted measure of how bright it appears to human vision: L = 0.2126R + 0.7152G + 0.0722B after gamma correction. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Black on white scores 21:1, the maximum. Two similar grays might score 1.5:1 and fail everything.
Worked Example
Body text #101828 on white #ffffff: luminance of the dark color is about 0.009, white is 1.0, giving (1.05)/(0.059) β 17.7:1. That passes AAA for all text sizes with huge headroom. But medium gray #667085 on white scores about 4.83:1, passing AA normal text barely while failing AAA. Lighten the background or darken the text slightly to gain margin.
Common Failures and Fixes
Placeholder text in light gray on white is the most common real-world failure; darken placeholders to at least #767676. Colored buttons with white text need checking per color: a medium blue passes, but lighter brand blues often fail. Disabled states are exempt from WCAG contrast rules, but everything else interactive must pass. When a brand color fails, darken it just for text usage while keeping the bright version for large graphics.
Frequently Asked Questions
What is a good contrast ratio for text?
At least 4.5:1 for normal text (WCAG AA) and 3:1 for large text. Aim for 7:1 (AAA) for body copy when possible. Black on white is 21:1, the maximum.
What is the difference between AA and AAA?
AA is the standard compliance level required by most accessibility laws (4.5:1 for normal text). AAA is enhanced (7:1), recommended for maximum readability but not legally required.
What counts as large text in WCAG?
Text that is at least 18pt (24px), or 14pt (18.66px) if bold. Large text has lower contrast requirements: 3:1 for AA, 4.5:1 for AAA.
Does placeholder text need to meet contrast?
Yes for AA compliance if it conveys information, which placeholders almost always do. Many default placeholder grays fail; use at least #767676 on white.
How is contrast ratio calculated?
From relative luminance: (L1 + 0.05) / (L2 + 0.05), where L is a gamma-corrected brightness measure weighted toward green, which human eyes see best. This tool computes it exactly per the WCAG 2.1 formula.