Color Contrast Checker
Check any foreground/background pair against WCAG 2.1 AA and AAA, with a live ratio and text preview.
- ✓Normal text AA≥ 4.5
- ✓Normal text AAA≥ 7
- ✓Large text AA≥ 3
- ✓Large text AAA≥ 4.5
- ✓UI / graphics≥ 3
Large text preview (24px Bold)
This is a normal text preview. Check how readable body text of this size is on this background. The quick brown fox.
🔒 Calculated only in your browser, using WCAG 2.1 relative-luminance contrast.
How it works
Type or paste a foreground (text) and background color as a hex code, or pick them with the native color swatches; both three- and six-digit hex are accepted. The contrast ratio updates instantly, shown to two decimals from 1:1 up to 21:1, alongside a plain-language grade: AAA, AA, AA Large, or Fail. Below it, five checks light up pass or fail against the exact WCAG thresholds: normal-text AA (4.5:1) and AAA (7:1), large-text AA (3:1) and AAA (4.5:1), and the 3:1 minimum for UI and graphical elements. A Swap button flips the two colors in one click, and a live panel renders 24px bold and regular body copy on your chosen background, so you can judge readability with your own eyes and not just the number.
When to use it
Reach for it whenever a color decision affects legibility: settling on a body-text color over a brand-tinted section, checking whether a muted gray for captions or placeholder text still clears 4.5:1, or confirming that button labels and links stand out enough to read. The 3:1 UI check covers the parts people forget, like icon glyphs, input borders, focus rings, and chart segments. It is just as useful for building a dark-mode palette, where inverted colors often drift below the line. Low contrast is the single most common issue flagged in accessibility audits, so a quick check here heads off failures in Lighthouse, axe, or a manual WCAG review, and helps you meet requirements like the ADA, Section 508, and the European Accessibility Act (EN 301 549).
Private and precise
Every calculation happens in your browser using the official WCAG 2.1 relative-luminance formula, so the ratios match what Lighthouse, axe, and other audit tools report. Nothing is uploaded, no account is needed, and the colors you test never leave your device. One thing to keep in mind: the tool measures a single flat foreground-on-background pair. If your text sits on a gradient, a photo, or a semi-transparent overlay, sample the actual color directly behind the letters, the effective composited value, rather than the layer's nominal color, since the real contrast can differ sharply. The live preview exists for exactly that kind of sanity check, letting you confirm the number matches what you actually see on screen.
Frequently asked questions
What ratio should I aim for?
For normal body text, 4.5:1 meets WCAG AA and 7:1 meets AAA. Large text (at least 18pt, or 14pt bold) needs only 3:1 for AA and 4.5:1 for AAA, and non-text UI such as icons, borders, and focus rings needs 3:1. AA is the practical baseline that most sites and accessibility laws treat as the minimum.
What is the difference between AA and AAA?
AA is the standard conformance level that nearly every site and regulation (the ADA, Section 508, EU rules) treats as the requirement. AAA is an enhanced level that is often impractical to hit across a whole design, so it is usually reserved for content aimed at users with low vision. Target AA everywhere and push to AAA where the design allows.
Does the ratio account for text over images or gradients?
No. It compares one solid foreground against one solid background. For text on a photo, gradient, or translucent layer, sample the actual color sitting directly behind the letters and test that value, because the effective contrast can vary a lot across different parts of the image.