WCAG 2.2 contrast vs APCA: how they differ and which to use

The WCAG 2.x contrast ratio

WCAG 2.x measures contrast with a ratio between the relative luminance of two colours. Relative luminance is a number from 0 (black) to 1 (white) computed from linear red, green and blue. The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, which gives a value from 1:1 (identical) to 21:1 (black on white). The 0.05 term stands in for ambient light.

// for each sRGB channel c in 0..1
linear = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

ratio = (Llighter + 0.05) / (Ldarker + 0.05)

The weights show how much the formula trusts each channel: green counts for most of the brightness, red for some, and blue for very little. That is why a pure blue is a good text colour on white but a poor one on black. The WCAG text has historically given that first threshold as 0.03928 instead of 0.04045; no 8-bit colour falls between the two values, so the results are the same.

The ratio is not rounded up in practice. A pair at 4.49:1 fails the 4.5:1 requirement, and this site floors displayed ratios to two decimals for that reason, so it never shows a failing pair as passing.

Thresholds: AA, AAA and large text

Large text means at least 18 point (24 CSS pixels) regular weight, or at least 14 point (about 18.66 CSS pixels) bold. Everything smaller needs the higher ratio. Level AA is the target most organisations adopt; Level AAA is stricter and is not required for whole sites because some content cannot meet it. Inactive controls, pure decoration and logotypes are exempt, but links, labels, form text and placeholder text are not.

Non-text contrast (1.4.11) covers things like input borders, icons and the focus indicator, which need at least 3:1 against adjacent colours. It is easy to forget because it applies to shapes, not words.

Where the WCAG ratio is weak

The ratio is symmetrical: white on a mid-grey and that same grey on white give the same number. Human vision is not symmetrical. Light text on a dark background tends to look different from dark text on a light one, and the ratio cannot tell them apart. It also ignores font size and weight beyond the single large-text switch, so a hairline light weight at 4.5:1 and a heavy bold at 4.5:1 count as equal.

Critics of the ratio point out that it can pass pairs many people find hard to read, and fail some that look clear, particularly around mid-tones and in dark mode. That is the practical argument for a different model, not a claim that the ratio is useless: it is a simple, well-understood and widely implemented rule with a legal footing.

What APCA is

APCA stands for Accessible Perceptual Contrast Algorithm. It was developed by Andrew Somers of Myndex as part of an effort to replace the WCAG 2 ratio in a future version of the guidelines, and the version most tools implement is called APCA-W3. Instead of a ratio, it outputs a lightness contrast value, Lc, on a scale where a magnitude of about 100 is the strongest contrast, and about 0 is no contrast.

• Polarity-aware. Positive Lc means dark text on a light background and negative Lc means light text on a dark background, and the two magnitudes differ for the same pair of colours.
• Font-dependent. The Lc you need depends on how big and how heavy the text is. Thin small text needs a higher value than large bold text.
• Perceptual. It is designed around how lightness differences are seen, and is meant to behave better for dark mode and mid-tones than a simple ratio.

The polarity difference is easy to see in the data. Mid-grey #888888 on white scores Lc 63.1, but white text on that same grey scores Lc -68.5. The WCAG ratio is 3.54:1 for both. That asymmetry is exactly what APCA is meant to capture.

Commonly cited APCA guidance

APCA's own documentation maps Lc values to uses. These are APCA's published guidance, which may change, and they are not part of any W3C standard that you can claim conformance to today.

Treat these as guidelines for design decisions, not pass or fail rules. The full APCA lookup also varies the minimum by font size and weight, and the documentation prefers higher values for body text than the minimum shown here. This site's contrast checker shows Lc next to the WCAG ratio, using 75 as its body-text mark and 45 as its UI and large-text mark.

Six pairs scored both ways

The table scores six pairs with both methods. The WCAG ratio and level come from the formula above and the Lc values come from the APCA-W3 implementation in the colour library this site uses, checked against the reference values for black on white, white on black and #888 on white.

Read it across. Black on white and white on black have the same ratio, yet different Lc magnitudes. The grey #888888 on white passes only the large-text AA level at 3.54:1, and its Lc of 63.1 is short of the 75 cited for body text. The pair #767676 on white is the classic minimal AA pass at 4.54:1, and APCA gives it Lc 71.6, below the 75 usually cited for body text. A pair can satisfy WCAG AA and still fall short of APCA's body-text number, which is why the two methods are worth comparing.

Which one to use

APCA is a candidate method for WCAG 3, which is still a draft. It is not a current legal standard, and nothing in a conformance claim today can be based on it. WCAG 2.2 Level AA is what laws, contracts and audits reference, so that is the level to meet if compliance matters. Do not tell a client or a regulator that a colour passes because its Lc is high; tell them the ratio.

A sensible workflow uses both: meet WCAG 2.2 AA for compliance, then look at Lc to catch pairs that pass the ratio but are weak in practice, especially thin text, small text and dark mode. If the two disagree, the safer choice is the colour that satisfies both. When a pair fails, the fix is the same under either method: move lightness. The guide to fixing colour contrast shows how.

FAQ

What contrast ratio does WCAG 2.2 AA require?

Normal text needs at least 4.5:1, and large text needs at least 3:1. Large text is at least 18 point (24 px) regular or 14 point (about 18.66 px) bold. UI components and graphical objects need 3:1 under success criterion 1.4.11. Level AAA raises the text values to 7:1 and 4.5:1.

Is APCA part of WCAG?

No. APCA is a candidate method for the WCAG 3 draft, which is not final. WCAG 2.2 AA, with its contrast ratio, is still what laws and audits reference. You can use APCA as an extra check, but not as a substitute for the WCAG 2 ratio in a conformance claim.

What do APCA Lc values mean?

Lc is a lightness contrast score where a larger magnitude means stronger contrast. A positive sign means dark text on a light background and a negative sign means light text on a dark one. APCA's published guidance cites about Lc 75 for body text and lower values for larger text, and it may change.

Why do WCAG and APCA give different results?

WCAG uses a symmetrical luminance ratio, so swapping text and background changes nothing. APCA models perception, including polarity, and its requirements depend on font size and weight. A pair can pass one and fall short on the other.

Which method should I design to?

Design to meet WCAG 2.2 AA, because that is what compliance is measured against, and use APCA as a second opinion for text that is thin, small or in dark mode. If a pair is borderline under both, increase the lightness difference.