Tool · Contrast checker

Contrast checker — WCAG + APCA.

Compare WCAG 2.x contrast ratios with APCA reference values in a single view. Review the preview and text thresholds, then use the results as one part of an accessibility check.

Body text — 16px regular

Large text — 24px regular

Bold heading — 24px bold

WCAG 2 contrast ratio
18.19:1
APCA Lc
102
WCAG AA — body text✓ Pass
WCAG AA — large text / UI✓ Pass
WCAG AAA — body text✓ Pass
WCAG AAA — large text✓ Pass
APCA reference — body text (|Lc| ≥ 75)✓ Pass
APCA reference — large text (|Lc| ≥ 60)✓ Pass
WCAG 2.x uses a relative-luminance ratio (1:1 to 21:1). APCA is an additional perceptual contrast model that responds to light-on-dark versus dark-on-light text. The W3C WCAG 3.0 draft has not selected a contrast algorithm, so treat APCA values here as guidance rather than a WCAG conformance result.
Full palette matrix →Wide-gamut (P3/OKLCH) →Vision-condition preview →

How to use a WCAG contrast checker

Enter a foreground text color and a background color, then review the contrast ratio and text preview. Under WCAG 2.2 Success Criterion 1.4.3, normal text generally needs at least 4.5:1 contrast and large text generally needs at least 3:1, subject to the criterion's exceptions. A ratio check is one part of an accessibility review: also inspect interface states, focus indicators, meaningful graphics, and text against every background where it appears.

WCAG ratio and APCA are different checks

The WCAG ratio uses relative luminance. APCA reports a perceptual lightness contrast value and responds to text polarity and size, so it can offer another way to compare a pair. Treat APCA values as additional guidance, not as a WCAG pass or fail: the W3C's current WCAG 3.0 draft has not selected a contrast algorithm. For palette-wide review, use the contrast matrix to inspect more color pairs.