Color Contrast Checker (WCAG + APCA)

Why contrast matters

About 8% of men and 0.5% of women have some form of color-vision deficiency. A larger share — perhaps 1 in 3 adults over 40 — have reduced visual acuity that makes low-contrast text genuinely hard to read. WCAG (the Web Content Accessibility Guidelines) sets minimum contrast ratios that have become legally binding in many jurisdictions: the European Accessibility Act (EAA, in force June 2025), Section 508 in the US, the AODA in Ontario, and the UK Equality Act. "Looks fine on my screen" isn't a defense.

WCAG 2.1 thresholds

• AA (the legal minimum in most jurisdictions): 4.5:1 for normal text, 3:1 for large text (18pt regular or 14pt bold), and 3:1 for UI components / focus indicators (the "non-text contrast" rule added in WCAG 2.1).
• AAA (best practice, hard to maintain across an entire design): 7:1 for normal text, 4.5:1 for large text. AAA-throughout is rare; targeted AAA on critical content (forms, error messages, primary CTAs) is more realistic.

The math: contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05), where L is the relative luminance computed from gamma-corrected RGB. The +0.05 prevents division by zero (pure black) and reduces the difference between near-black pairs. Result range: 1 (identical colors) to 21 (pure black on pure white).

APCA — the proposed replacement

WCAG's contrast formula has known shortcomings: it underestimates how readable mid-range pairs actually are, treats all colors symmetrically (dark-on-light and light-on-dark get the same score even though they don't read the same), and doesn't account for font size or weight in the math. Result: real-world readable text often "fails" WCAG, and some text that "passes" is genuinely hard to read.

APCA (Accessible Perceptual Contrast Algorithm) is the proposed replacement currently in WCAG 3 working drafts. It's perceptually uniform, polarity-aware (positive = dark-on-light, negative = light-on-dark), and pairs directly with font-size/weight tables rather than a single threshold. As of 2026 it's not yet a legal standard — but Microsoft, Apple, Adobe, and several major design systems already use it internally. Run both checks; they'll usually agree, and when they disagree, your eye will probably side with APCA.

Common pitfalls

• Translucent backgrounds defeat contrast testing. If your text is on a semi-transparent overlay, the effective background depends on what's behind it. Test against the worst-case (e.g. white text over a 50% black overlay sitting on a busy image — test against pure black AND against the average image color).
• Gradients and photos. WCAG officially says test against the lightest and darkest pixels under the text. In practice, designers add a solid colored backdrop strip behind the text or apply text-shadow. Pure text on photos almost always fails somewhere.
• Hover/focus states. The contrast rule applies to every state, including hover and focus. A button that's WCAG-compliant by default but reduces contrast on hover (subtle "lift" effects) silently violates AA in the hover state.
• Dark mode isn't automatically more accessible. A common mistake is using a slightly-lighter dark gray on dark gray, thinking "dark mode is easier on the eyes". The contrast ratios apply equally; test both modes.
• Brand colors that don't pass. A common painful conversation. The solution is usually two brand colors: the "logo only" version and the "accessible-paired" version. Apple's blue is a few shades darker on text than on logos for exactly this reason.