DESIGN SYSTEMS & CODE

WCAG & APCA Color Contrast Checker

Check any text/background color pair against both WCAG 2.1 (AA/AAA) and the newer, perceptually-calibrated APCA algorithm — computed live, in your browser, from the exact published formulas.

Colors

The quick brown fox jumps.
on

WCAG 2.1 Contrast Ratio

14.68:1
AA · Normal textPASS
AAA · Normal textPASS
AA · Large textPASS
AAA · Large textPASS

APCA Contrast (Lc)

+101.5Lc

Dark text on a light background (positive Lc).

Recommended use: Body text at any reasonable weight/size
Contrast & Accessibility Guide

WCAG vs. APCA - Why There Are Two Numbers

Both algorithms answer the same question - "can most people actually read this?" - but they answer it differently, and they can disagree on the same color pair.

WCAG 2.1 Contrast Ratio

Defined in Success Criterion 1.4.3. It computes each color's relative luminance (a 0-1 value based on how a human eye perceives sRGB brightness) and takes the ratio between the lighter and darker one, giving a number from 1:1 (identical) to 21:1 (pure black on pure white).

  • AA normal text: 4.5:1 minimum
  • AA large text (≥24px, or ≥19px bold): 3:1 minimum
  • AAA normal text: 7:1 minimum
  • AAA large text: 4.5:1 minimum
  • UI components / graphical objects (SC 1.4.11): 3:1 minimum

APCA (Lc)

The algorithm being developed for WCAG 3. Instead of a single ratio, it produces a signed "Lc" (Lightness Contrast) value from roughly -108 to +106, using separate exponents for text and background luminance and for each polarity (dark-on-light vs. light-on-dark) - which is why swapping foreground and background isn't just a sign flip.

  • Lc 90+: body text at any reasonable size
  • Lc 75+: fluent 16px+ body text
  • Lc 60+: larger (24px+) or bold text
  • Lc 45+: large text (36px+) or UI components only
  • Lc 30+: spot/decorative text only

Why WCAG 2.1's Formula Is Known to Be Imperfect

The WCAG 2.1 ratio was calibrated primarily on desktop CRT displays and treats light-on-dark and dark-on-light symmetrically, even though the human eye doesn't perceive them the same way. Two well-documented consequences:

  • Mid-gray text on white can mathematically pass 4.5:1 while looking noticeably washed out and harder to read than a slightly-lower-ratio combination in a different hue.
  • Very dark text on a very dark (but not black) background can fail the same 4.5:1 threshold despite being comfortably readable in practice.

APCA was built to correct exactly this. It is not yet an official, legally-referenced WCAG success criterion - WCAG 2.1's 4.5:1/3:1 thresholds remain the current legal/compliance standard (ADA, Section 508, EN 301 549) - but it is the direction contrast guidance is heading, which is why this tool reports both.

Frequently Asked Questions

Which number should I actually use to ship a design?

For legal/compliance purposes, WCAG 2.1 AA (4.5:1 normal text, 3:1 large text) is what auditors and lawsuits currently reference. Use APCA's Lc as an additional perceptual sanity check, especially for grays and dark mode.

Why did swapping my two colors change the APCA number so much?

APCA models text-on-light and light-on-text perception differently on purpose (different exponents for each polarity), unlike WCAG's single symmetric ratio. Always pass the actual text color as the foreground argument.

Is this contrast checker running the real published algorithms?

Yes. The WCAG relative luminance formula is the exact SC 1.4.3 sRGB-to-linear formula, and the APCA implementation reproduces the reference SAPC/APCA-W3 constants and formula structure (validated here against the algorithm's own published reference values: ~106 Lc for black-on-white, ~-107.9 Lc for white-on-black).

What counts as 'large text' for the lower 3:1 WCAG threshold?

18pt (24px) or larger at regular weight, or 14pt (~18.66px, commonly rounded to 19px) or larger at bold weight.

UI Pirate Ecosystem

Suggested Tools for Your Stack

Explore related utilities in this workflow or discover cross-category tools.

View All Tools →