APCA Contrast Checker

How the APCA Contrast Checker works

APCA contrast checker: reading the Lc score

APCA, the Accessible Perceptual Contrast Algorithm, is the contrast method in the working draft of WCAG 3. It replaces the WCAG 2 luminance ratio with a lightness contrast value, Lc, on a scale from 0 to about 106, where the sign tells you the polarity: positive for dark text on a light background, negative for light text on dark. The number is designed to track how readable text actually is, so it depends on which colour is the text and which the background, and its thresholds are tied to font size and weight rather than a single pass mark.

Why it differs from WCAG 2. The 4.5:1 ratio treats colours symmetrically and uses a simple luminance model, so it passes some mid-grey and orange combinations that are hard to read and fails some dark-mode pairings that are fine. APCA models the non-linearity of perceived lightness, the flare of a bright background and the difference between light-on-dark and dark-on-light, which is why a swap of the two colours produces a different Lc but the same WCAG ratio. Body-text grey #767676 on white is the classic case: it just passes WCAG AA at 4.54:1 but scores about Lc 72 in APCA, short of the 75 wanted for body text at 16px, and #888888 on white drops to Lc 63.

The levels. Lc 90 is the preferred body-text level and works at any weight including thin faces. Lc 75 is the minimum for body text of 16px or larger at normal weight. Lc 60 is the minimum for content text that is larger or bolder, around 24px regular or 18px bold. Lc 45 is for headlines and large text of 36px and above. Lc 30 is the floor for non-text elements such as icons, input borders and placeholder text, and Lc 15 is the lowest usable value, for decorative elements and disabled controls only. Anything below 15 is treated as invisible.

Font size and weight. APCA's real output is a lookup: for a given Lc, what is the smallest text that stays readable at each weight? The table gives that minimum for weights 300 to 700, derived from the draft lookup table, and the readout compares it with the size and weight you entered. Heavier weights can go smaller at the same contrast; thin weights need both higher contrast and larger sizes, which is why light 300-weight body text so often looks washed out.

Status of the standard. WCAG 3 is a working draft and APCA is not yet a normative requirement; WCAG 2.x remains the standard cited in law and procurement. Use this checker to design text that is comfortably readable, and keep the WCAG 2 checker for compliance. Where the two disagree, the safest choice is to satisfy both, which usually means a slightly darker text colour than WCAG 2 alone would require.

APCA contrast of greys on white

Grey text on #ffffff at 16 px and weight 400.

APCA Lc and WCAG 2 ratio for grey text on white

APCA formula and worked examples

The formula: the APCA formula converts each colour to an estimated screen luminance Y, then takes Lc = (Ybg^0.56 − Ytext^0.57) × 1.14 × 100 for dark text on a light background, or (Ybg^0.65 − Ytext^0.62) × 1.14 × 100 for light text on dark, with a small offset and a soft clamp near black. The different exponents are why the score is not symmetrical.

First example. black text on white scores Lc 106.0, comfortably above the Lc 90 preferred for body text. Swap them and white on black scores Lc -107.9 — negative because the polarity is reversed, and slightly larger in size.

Second example. mid-grey #767676 on white scores Lc 71.6. Its WCAG 2 ratio is 4.54:1, which just passes AA, but at Lc 72 APCA only accepts it for larger or bolder text — a clear example of the two methods disagreeing.

How many Lc points do you need? Lc 90 is preferred for body text, Lc 75 is the minimum for body text, Lc 60 for content text that is not body copy, Lc 45 for large headings, Lc 30 for placeholder and disabled text and Lc 15 for non-text dividers.

Related tools