Contrast Checker — WCAG 2.x + APCA (WCAG 3 preview)
Live contrast for a foreground + background color pair, shown both as the legacy WCAG 2.x ratio (4.5:1 to 21:1) and as the WCAG-3-preview APCA Lc value (-108 to +106, perceptual). Pick two colors, see how they pass. Runs in your browser.
Large display text — 24px bold
Medium text — 18px regular
Small body text — 14px regular. The quick brown fox jumps over the lazy dog.
WCAG 2.x
— : 1
- — AA normal text (≥ 4.5:1)
- — AA large text (≥ 3:1)
- — AAA normal text (≥ 7:1)
- — AAA large text (≥ 4.5:1)
- — UI / non-text (≥ 3:1)
APCA (WCAG 3 preview)
— Lc
—
APCA Lc is perceptual; thresholds vary by font
size + weight. Sign tells polarity: positive = dark text on
light bg; negative = light text on dark bg.
What the levels mean
- |Lc| ≥ 75
- Comfortable for any body text.
- |Lc| 60–75
- Body text at 16–24px regular weight.
- |Lc| 45–60
- Headings at ≥ 18px regular or ≥ 14px bold.
- |Lc| 30–45
- Large display only (≥ 24px regular or ≥ 18px bold).
- |Lc| 15–30
- Non-text UI elements only (borders, focus rings).
- |Lc| < 15
- Invisible for practical purposes.