APCA Contrast Checker

Calculate text contrast using APCA (Advanced Perceptual Contrast Algorithm) — the model behind WCAG 3 — which accounts for font size and weight rather than treating all text the same. Enter foreground and background colors, font size, and weight to get the Lc value and see whether it meets the recommended threshold for readable body text, headlines, or UI labels.

How to use the APCA Contrast Checker

1. Enter the text (foreground) color and background color as hex values — use either the color swatch or type directly. 2. Set the font size in pixels. 3. Choose the font weight. The Lc (lightness contrast) value updates instantly, along with a judgment of whether the combination meets the recommended threshold for that size/weight. 4. The live preview shows actual text on the chosen background so you can visually verify the result. A negative Lc means the text is lighter than the background; the magnitude is what matters.

Use the Example button to load a typical body-text scenario (dark text on white at 16 px / 400 weight).

What is APCA and how does Lc differ from WCAG 2 contrast ratio?

WCAG 2 contrast ratio is a simple luminance ratio (L1+0.05)/(L2+0.05) with fixed thresholds of 4.5:1 for normal text and 3:1 for large text. It treats every 14px bold combination the same as 48px light text — which does not match how humans perceive contrast. A black swatch on a white background scores 21:1, yet the same colors at 8px and weight 100 are nearly illegible.

APCA (Advanced Perceptual Contrast Algorithm, SAPC 0.1.9) models the spatial aspects of reading: thin strokes at small sizes require higher contrast than thick strokes at large sizes. The output is an Lc value (Lightness Contrast) on a scale of roughly 0–106. Lc 45 is the practical floor for any text; Lc 60 covers body text at 400 weight; Lc 75 handles smaller or lighter fonts; Lc 90 is needed for very small (<12 px) or very thin (100–200 weight) text. Lc values are signed — positive means dark-on-light (standard polarity), negative means light-on-dark (reverse polarity).

APCA is not yet legally required (WCAG 2.1 AA is the current legal standard in most jurisdictions), but it is the algorithm behind WCAG 3 and is increasingly cited in design systems at companies like Apple and Google. Checking your palette with APCA in addition to WCAG 2 gives you a more accurate picture of real-world readability — especially for brand palettes that struggle at small-print or low-weight sizes.

Common use cases

  • Design-system tokens — validate every color token pair in your system for a range of font sizes and weights before shipping, catching pairs that pass WCAG 2 but fail APCA at body-text sizes.
  • Light-on-dark UI patterns — reverse-polarity text (white/light on dark) is treated differently by APCA; verify that ghost buttons, captions, and disabled states remain readable.
  • Thin or light-weight fonts — high-fashion brands often use weight-100 or weight-200 fonts; APCA quantifies exactly how much you need to boost contrast to compensate for the thin strokes.
  • Data visualization labels — small chart axis labels and tooltip text require Lc ≥ 75 at typical sizes; APCA catches the pairs that a 4.5:1 check would pass.
  • WCAG 3 preparation — organizations preparing for WCAG 3 adoption can audit their existing palette now and plan remediation before the standard becomes mandatory.

Frequently asked questions

Is APCA legally required for accessibility compliance?
Not yet. WCAG 2.1 AA (4.5:1 ratio) is the current legal standard in the EU, US, and most other jurisdictions. APCA is the algorithm proposed for WCAG 3, which is still in development. Use APCA alongside WCAG 2 for a more accurate readability check.

Why is my Lc value negative?
A negative Lc means the text is lighter than the background (reverse or "light-on-dark" polarity). APCA applies different exponents for each polarity because the human visual system responds differently to light strokes on dark versus dark strokes on light. The absolute value (|Lc|) is the contrast magnitude you compare against thresholds.

What Lc value do I need for body text?
As a practical guide: |Lc| ≥ 45 is the absolute floor for any text; body text at 400 weight, 16 px should target |Lc| ≥ 60; smaller text (12–14 px) or lighter weights (300 and below) need |Lc| ≥ 75–90. The APCA lookup table gives exact values per font-size/weight combination.

Does APCA apply to non-text elements like icons or borders?
APCA is primarily specified for text. For UI components and graphical objects WCAG 2 still applies (3:1 ratio). APCA research into non-text contrast is ongoing and not yet part of the standard.

Why does APCA use exponents like 2.4, 0.56, 0.57 instead of a simple formula?
These exponents are fit to empirical data about human contrast sensitivity — they capture how the eye's response to luminance is non-linear (brighter backgrounds adapt the eye differently) and how spatial frequency (font size/weight) modulates perceived contrast. The goal is a formula that predicts pass/fail better than the WCAG 2 ratio across the full range of real-world typography.