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.

Foreground

Background

Preview font

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.

What is the color contrast checker?

A color contrast checker measures the difference between a text color and its background and reports whether the pair passes WCAG 2.2 (AA needs 4.5:1 for body text, 3:1 for large text and UI components; AAA needs 7:1). This checker shows the WCAG ratio and the APCA Lc value together and can auto-fix a failing pair.

How the contrast ratio is calculated

WCAG takes the relative luminance of each color (a weighted sum of the linearized red, green and blue channels) and divides the lighter by the darker, after adding 0.05 to each. The result runs from 1:1 (identical) to 21:1 (black on white). The thresholds are 4.5:1 for normal text and 3:1 for text at 18pt or 14pt bold, icons and input borders, at level AA; 7:1 and 4.5:1 at AAA.

APCA (Accessible Perceptual Contrast Algorithm) is the newer model proposed for WCAG 3. It reports a lightness contrast value Lc from 0 to about 106, accounts for polarity (dark on light versus light on dark) and is paired with font size and weight tables. Lc 60 is roughly the body-text floor and Lc 75 is preferred. Both numbers are shown because WCAG 2.2 is the legal standard today and APCA better predicts real readability.

Fixing a failing pair

Auto-fix moves the text color along its lightness axis in OKLCH until the pair passes the level you choose, keeping the hue, and shows the before and after. Swap the colors with one click, preview real type at several sizes, and share the result as a URL. For a whole palette, the contrast matrix checks every pair at once.

How to use the color contrast checker

Enter the text color and the background color, or pick them from the wheel.
Read the WCAG ratio and the AA and AAA badges for normal and large text, plus the APCA Lc.
If it fails, click Auto-fix to the level you need, or adjust the lightness slider.
Copy the passing pair or share the result link.

Color Contrast Checker FAQ

What contrast ratio is required for WCAG AA?

4.5:1 for normal text, 3:1 for large text (18pt, or 14pt bold) and for non-text elements like icons and form borders.

What is the difference between WCAG and APCA?

WCAG 2.2 uses a luminance ratio and fixed thresholds and is the current legal standard. APCA is a perceptual model that better matches how people read text and is the candidate for WCAG 3. An APCA value is not a WCAG conformance result.

Does the checker meet ADA requirements?

ADA compliance in the US generally references WCAG 2.1 or 2.2 AA. Passing AA here covers the color contrast criterion (1.4.3); other criteria need separate checks.

How is this different from the WebAIM contrast checker?

It reports the same WCAG ratio and adds APCA, auto-fix that keeps your hue, live type previews at multiple sizes, and a palette-wide matrix.