Live
Color Palette Generator
Generate harmonious palettes from one seed.
Design · Accessibility
Contrast Checker
Pick a foreground and background color and get the precise WCAG ratio plus an instant AA/AAA verdict for normal or large text — the exact numbers reviewers look for.
Check a pair
Result
Aa
How it works
Reading the number
The formula
The browser perceives each color's brightness differently. This tool converts both to relative luminance, then divides — the WCAG 2.x formula every accessibility checker shares.
AA vs AAA
AA 4.5:1 covers normal text on most sites. AAA 7:1 is the stricter bar for body copy and important text. Large text gets a discount: 3:1 (AA) and 4.5:1 (AAA).
Why it matters
Low contrast is one of the most common accessibility failures — it excludes low-vision readers and hurts on bright monitors. A quick check before shipping is cheap insurance.
Questions
Contrast checker FAQ
What is the minimum ratio for body text?
4.5:1 for AA compliance. That is the number most audits, WCAG 2.1 and 2.2, and the ADA look for in standard-sized text. Go for 7:1 if you want AAA.
Does large text really need less?
Yes. 18pt (24px) text, or 14pt bold, only needs 3:1 for AA because bigger glyphs are easier to read at lower contrast. Toggle Large text to see the verdict change.
Are decorative elements included?
No. Contrast applies to text and essential UI components like icons and input borders — decorative flourishes and logos are excluded from WCAG's text requirements.