Color Contrast Checker — WCAG AA / AAA Ratio
Free WCAG color contrast checker. Enter foreground and background colors to get the exact contrast ratio and AA/AAA pass-fail for normal and large text, with a live preview.
Color Contrast Checker
Large heading sample
The quick brown fox jumps over the lazy dog. This is a normal-size paragraph showing how your body text reads on the chosen background.
Accessible color contrast
WCAG requires a contrast ratio of at least 4.5:1 for normal text (3:1 for large) to pass AA — and 7:1 for AAA. Pick your text and background colors to see the ratio and whether it passes, with a live preview.
How to use the Color Contrast Checker
Takes about a minute. No signup, no download, your data stays in your browser.
- 1Open the tool. Scroll up to the Color Contrast Checker above — it loads instantly in your browser, no install needed.
- 2Enter your values. The fields come pre-filled with realistic defaults so you can see how it works — replace them with your own numbers.
- 3Read the result. The output updates instantly. Copy or share it — nothing is uploaded to a server, everything stays on your device.
Frequently asked questions
Common questions about the Color Contrast Checker.
What contrast ratio do I need to pass WCAG?
For AA, normal text needs at least 4.5:1 and large text (about 18pt, or 14pt bold) needs 3:1. For the stricter AAA level, normal text needs 7:1 and large text 4.5:1.
What counts as "large text" for the lower 3:1 threshold?
WCAG treats text as large at roughly 18pt (24px) regular, or 14pt (about 18.66px) bold. Larger text is easier to read, so it is allowed a lower contrast ratio.
Does the contrast ratio depend on which color is the text and which is the background?
No. The ratio is calculated from the relative luminance of both colors, so swapping foreground and background gives the same number — what matters is the difference between them.
Why did my color pass AA but fail AAA?
AAA simply requires more contrast (7:1 versus 4.5:1 for normal text). A combination can clear the AA bar while still being too low-contrast for the AAA target.
Does a passing ratio guarantee my design is accessible?
It covers text contrast, which is a major factor, but full accessibility also depends on font size, spacing, not relying on color alone to convey meaning, and contrast for non-text elements like icons and borders.
Community rating
Discussion (0)
No comments yet. Start the discussion.
Keep exploring
Related tools across 7BusyBoss — all free, all instant.