Color Contrast Checker
Test color contrast against WCAG AA & AAA.
100% private — runs in your browser, nothing is uploaded.
Large text preview
Normal body text preview — the quick brown fox jumps over the lazy dog while checking readability.
| Requirement | Min ratio | Result |
|---|---|---|
| Normal text — AA | 4.5 | Pass |
| Normal text — AAA | 7.0 | Pass |
| Large text — AA | 3.0 | Pass |
| Large text — AAA | 4.5 | Pass |
| UI components / graphics | 3.0 | Pass |
Large text = 18.66px bold or 24px and up. Ratios follow WCAG 2.1.
How to use the Color Contrast Checker
- 1Pick a text color
Use the swatch or type a hex value for your foreground text.
- 2Pick a background
Set the background color the text sits on.
- 3Read the ratio
The contrast ratio and a live preview update instantly.
- 4Check pass/fail
See AA and AAA results for normal text, large text and UI elements.
Examples
| Input | Output |
|---|---|
#767676 on #ffffff | 4.54:1 — normal AA pass |
#ffffff on #000000 | 21:1 — passes everything |
Free WCAG color contrast checker
This color contrast checker measures the ratio between a text color and its background and tells you instantly whether it meets the WCAG AA and AAA accessibility standards. Sufficient contrast is what makes text legible for people with low vision, color blindness, or anyone reading on a glary phone screen outdoors.
Why contrast matters for accessibility and SEO
Poor contrast is one of the most common accessibility failures on the web, and it shows up in automated audits like Lighthouse — the same audits that feed into how search engines assess page quality. Fixing contrast improves real readability and your accessibility score at the same time.
Understand the thresholds
The magic numbers are 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 for AAA. Interactive controls and icons need 3:1. This tool checks all of them at once and shows a live preview so you can nudge a shade until it passes. Everything runs locally in your browser.
Frequently Asked Questions
What is a good color contrast ratio?
WCAG requires at least 4.5:1 for normal body text and 3:1 for large text to meet level AA. For the stricter AAA level, aim for 7:1 (normal) and 4.5:1 (large). Higher is always safer.
What counts as 'large' text?
Large text is 24px (about 18pt) or larger, or 18.66px (14pt) and larger if bold. Large text has a lower contrast requirement because bigger letters are easier to read.
What is the difference between AA and AAA?
AA is the standard most websites and laws (like the ADA and EN 301 549) target. AAA is an enhanced level for maximum accessibility. Meeting AA is the practical baseline; AAA is a stretch goal.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result ranges from 1:1 (identical) to 21:1 (black on white).
Does the 3:1 rule apply to buttons and icons?
Yes. WCAG 2.1 requires a 3:1 contrast for meaningful UI components and graphical objects — button borders, form field outlines, icons — against their adjacent colors.
Is my color data private?
Completely. The calculation runs in your browser, so the colors you test are never uploaded and the tool works offline.