Tools Blog

Contrast Checker

Scan to open this page

Check text/background contrast against both WCAG 2.x (today's legal/practical standard) and APCA (its documented WCAG 3 successor) at once — because WCAG 2.x's formula is known to overstate contrast for darker color combinations (verified directly: gray #7d7d7d text on black passes WCAG AA at 5.10:1, but scores a weak APCA Lc of -33.3, well below what's needed for reliable body text).

How it works

  1. Pick a text color and a background color — a live text preview updates instantly
  2. WCAG 2.x ratio (with AA/AAA pass/fail for normal and large text) and APCA Lc render side by side
  3. If WCAG says pass but APCA says weak, an explicit warning explains the gap

Frequently asked questions

Why does WCAG say pass but APCA say it's weak?

WCAG 2.x's contrast formula is documented to overstate contrast for darker color combinations. A concrete example: gray #7d7d7d text on a black background scores 5.10:1 under WCAG (passing AA), but only Lc -33.3 under APCA — well short of the roughly 60 needed for reliably readable body text.

What is APCA?

The Accessible Perceptual Contrast Algorithm — designed to more accurately reflect how humans actually perceive contrast, and the documented replacement for WCAG 2.x's contrast math in the upcoming WCAG 3.

Which standard should I actually follow?

WCAG 2.x is still the current legal/practical compliance standard, so use it for that. For borderline combinations — especially darker ones — it's worth also checking the APCA score before shipping.

Can this check text over a gradient or image?

Not directly — this version checks solid color pairs. For a gradient or image background, sample the color at the point where contrast is weakest and check that.

#ContrastChecker#WcagContrastRatioCalculator#ApcaVsWcagContrast#ColorContrastCheckerAccessibility#DarkModeTextContrastWcagFails

Related tools

Color Shade Generator Color Shade Generator Color Mixer Color Mixer HEX to RGBA Converter HEX to RGBA Converter

From the blog

Gray text on black passes WCAG AA at 5.10:1. The same pair scores -33.3 on the algorithm replacing WCAG.
color-css

Gray text on black passes WCAG AA at 5.10:1. The same pair scores -33.3 on the algorithm replacing WCAG.

We ran the actual numbers on a dark gray-on-black combo. WCAG 2.x calls it a clean pass. APCA — the perceptual algorithm slated to replace WCAG 2.x's contrast math — calls it insufficient for body text.

2026-08-30

Update history

  • 2026-08-30 Fixed: the live text preview's color wasn't updating — a global 'p { color }' site style was overriding the inherited color set on the preview's parent element. Preview text now updates correctly for both the normal and large text samples.
  • 2026-08-30 Added: a cover image (a reading card with wavy text-line placeholders beside two gauges pointing to different verdicts — one green with a checkmark, one amber with a warning triangle) — used as the card thumbnail, social share image, and blog title image.
  • 2026-08-30 Launched: live contrast checker (no button) — WCAG 2.x ratio and APCA Lc shown side by side, with a mismatch warning when WCAG passes but APCA rates the pair weak. APCA implementation verified directly against published reference values (black-on-white Lc≈106.0, white-on-black Lc≈-107.9) before use. Entirely client-side.