Color Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between a text and background color against WCAG 2.1 AA and AAA thresholds for normal text, large text, and UI components.
Large text sample
Normal body text sample — the quick brown fox jumps over the lazy dog.
Color contrast and WCAG
Contrast ratio measures how distinguishable two colors are, on a scale from 1:1 (identical) to 21:1 (black on white). The Web Content Accessibility Guidelines set minimum ratios so text stays readable for people with low vision or color deficiency — and meeting them is a legal requirement in many places.
ratio = (L₁ + 0.05) / (L₂ + 0.05)
L is relative luminance, a weighted measure of perceived brightness that counts green most and blue least, matching how human eyes work. It's not a simple average of the RGB values, which is why two colors that look similarly "medium" can have very different contrast.
The thresholds
AA is the usual target: 4.5:1 for normal text, relaxed to 3:1 for large text (18pt, or 14pt bold and above) because bigger letterforms are easier to resolve. AAA is stricter — 7:1 and 4.5:1 respectively — and is worth aiming for on body copy. Interactive elements and meaningful graphics need at least 3:1 against their surroundings under WCAG 2.1's non-text contrast rule.
Worked example
Mid-grey #767676 on white gives about 4.54:1 — it scrapes past AA for normal text but fails AAA. Lighten it slightly to #999999 and the ratio drops to roughly 2.85:1, failing even AA for body text, though it would still pass for large headings at 3:1. That narrow band is why grey text on white is such a common accessibility failure.
What contrast doesn't cover
A passing ratio doesn't make a design accessible on its own. Never rely on color alone to convey meaning — pair it with text, icons, or underlines — and remember that very high contrast can be uncomfortable for some readers, so pure black on pure white isn't automatically the best choice.
Passing the ratio is not the whole of readability
The WCAG contrast ratio is a well-defined calculation and a genuinely useful floor, but it measures only relative luminance. It says nothing about typeface, weight, letter-spacing, or the surrounding design, and thin light type can meet the ratio and still read poorly. It also does not model colour blindness directly — two colours can pass on luminance while being hard to tell apart for someone with a common colour vision deficiency. Treat a pass as necessary rather than sufficient.