WCAG Contrast Checker
Check whether a text and background color pair meets WCAG AA or AAA.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
Large text sample (24px+)
Normal text sample — the quick brown fox jumps over the lazy dog.
Your file never leaves your browser during processing
How it works
To check color contrast, enter a text color and a background color above — the contrast ratio and pass/fail badges for WCAG AA and AAA (normal text, large text, and UI components) update instantly, computed locally with no upload.
WCAG defines color contrast as a ratio between the relative luminance of two colors, ranging from 1:1 (identical colors) to 21:1 (pure black on pure white). The formula weighs red, green, and blue differently because the human eye is more sensitive to green than to red or blue, so two colors with the same numeric brightness can read as very different contrast.
The spec sets different minimum ratios depending on what the color pair is used for: 4.5:1 for normal body text at AA, dropping to 3:1 for large text (24px+, or 18.66px bold) since bigger strokes stay legible at lower contrast. AAA is the stricter tier — 7:1 and 4.5:1 respectively — and a separate 3:1 threshold under WCAG 2.1’s non-text contrast rule covers UI components like button borders and form field outlines, not just text.
Both colors accept hex, rgb(), or hsl() notation, or you can use the native color picker next to each field. Everything here — parsing the colors, computing luminance, and checking against each threshold — runs in plain JavaScript in your browser.
FAQ
What contrast ratio do I need to pass WCAG AA?
At least 4.5:1 for normal text, or 3:1 for large text (24px+ regular weight, or 18.66px+ bold). AA is the level most accessibility audits and legal requirements target.
What is the UI components badge for?
WCAG 2.1’s non-text contrast requirement (1.4.11) applies a 3:1 minimum to things like button outlines, form field borders, and icons that convey information — not just body text.
Which color formats are accepted?
Hex (#fff or #ffffff), rgb()/rgba(), and hsl()/hsla(). You can also use the color picker swatch next to each field instead of typing.