APCA vs WCAG 2 contrast, explained for designers
What APCA measures, how it differs from the WCAG 2 contrast ratio, why it is not part of WCAG 2 conformance, and how to use both without confusion.
5 min read
Many contrast checkers now show two numbers for the same pair of colors: a WCAG 2 ratio such as 4.54:1 and an APCA value such as Lc 72. They are trying to answer the same question, whether people can read this, with different math, and for some color pairs they point in opposite directions.
You don't have to pick a side. You do need to know which number is a requirement, where the two disagree, and how to use the newer one without fooling yourself about conformance.
The WCAG 2 ratio in brief
WCAG 2 computes the relative luminance of each color and divides: (L1 + 0.05) / (L2 + 0.05), with the lighter color on top. The result runs from 1:1 (identical colors) to 21:1 (black and white). 1.4.3 Contrast (Minimum) (AA) asks for 4.5:1 for normal text and 3:1 for large text, meaning at least 18 point (about 24 CSS px) regular or 14 point (about 18.66 CSS px) bold. 1.4.11 Non-text Contrast (AA) asks for 3:1 for interface components and meaningful graphics. Color contrast ratio explained walks through the math.
Two properties of this formula matter here. It is symmetric: dark text on a light background gives exactly the same ratio as the reverse. And it has only two size buckets: a 12 px hairline font and a 17 px semibold are held to the same 4.5:1.
What APCA does differently
APCA, the Accessible Perceptual Contrast Algorithm, is a contrast method designed to follow human perception of text more closely. It was explored as a candidate method for WCAG 3. Its output is a lightness contrast value, written Lc, on a scale that runs from about Lc 106 for black text on white to about Lc −108 for white text on black. Values near zero mean little or no contrast.
Three differences follow:
- Polarity matters. APCA treats dark-on-light and light-on-dark separately. The sign shows which one you have (positive for dark text on a light background, negative for light on dark), and the same two colors swapped give different magnitudes.
- Size and weight are part of the requirement. Instead of two buckets, APCA guidance ties the Lc you need to the font size and weight, through a lookup table. Thin, small text needs more contrast; heavy, large text needs less.
- Dark colors are treated more strictly. The WCAG 2 formula tends to overstate contrast when one or both colors are dark. APCA rates those pairs much lower, which matters a lot for dark themes.
The simplified guidance published alongside APCA has changed between versions, so check the current documentation before relying on exact thresholds. As a rough orientation, it has used levels like these: about Lc 90 as the preferred level for body text, Lc 75 as the minimum for body text, Lc 60 for other content text, Lc 45 for large headlines, and Lc 30 as the floor for any text at all, such as placeholders.
Where the two disagree
These pairs show the differences. The Lc values were calculated with the APCA 0.0.98G formula and rounded; other tools or versions may show slightly different numbers.
| Text on background | WCAG 2 ratio | APCA |
|---|---|---|
#767676 on white |
4.54:1 | Lc 72 |
#767676 on black |
4.62:1 | Lc −30 |
White on #767676 |
4.54:1 | Lc −77 |
White on orange #e8590c |
3.58:1 | Lc −68 |
Black on orange #e8590c |
5.87:1 | Lc 42 |
White on blue #3b82f6 |
3.68:1 | Lc −69 |
Black on blue #3b82f6 |
5.71:1 | Lc 40 |
The first two rows are the clearest case. WCAG 2 rates mid-gray text on black as slightly better than the same gray on white. APCA gives it less than half the score of the gray on white. If you have ever designed a dark theme where secondary text passed 4.5:1 but still looked dim, this is a large part of the reason.
The orange and blue rows show the opposite trap. On a mid-tone button, WCAG 2 says black text passes and white text fails, while APCA scores white text higher. This mid-tone case is one of the best-known criticisms of the WCAG 2 formula, and one that APCA was designed to handle differently. But under WCAG 2 the white label fails 1.4.3 for normal-size text, whatever APCA says.
Rows one and three show polarity: identical ratios under WCAG 2, different values under APCA.
What is actually required
WCAG 2.2 is the current W3C Recommendation, published on 5 October 2023. Laws, procurement rules and contracts that refer to WCAG conformance today point to WCAG 2.x, usually at level AA. Conformance to 2.x is measured with the 2.x contrast ratio. This is general information, not legal advice, but the technical point is simple: an APCA score does not count toward WCAG 2.x conformance, and a design that fails 4.5:1 for normal text fails 1.4.3 even if it scores well in APCA.
WCAG 3 is a working draft, not a standard. Its content has changed considerably between drafts, and it is not settled which contrast method, if any, it will use in the end. The W3C's WCAG overview links to the current status.
Using both sensibly
A workflow that keeps you honest:
- Treat WCAG 2 as the floor. Every text color, meaningful icon and focus indicator has to meet its 2.x threshold. This is what audits will check.
- Use APCA to choose among passing options. When several colors all clear 4.5:1, APCA helps you see which ones will actually read well, especially for thin weights and small sizes.
- Take APCA seriously in dark mode. Secondary text that sits right at 4.5:1 on a near-black background often scores poorly in APCA. Nudge it lighter. For example,
#a3a3a3on#121212is 7.43:1, about Lc −52, and noticeably more comfortable than a gray that only just passes. Dark mode and accessibility covers the rest of that palette. - Avoid colors where the two disagree. If a brand color sits in the mid-tone zone where white text fails WCAG 2 and black text scores poorly in APCA, the cleanest fix is often a darker or lighter shade of the button color, one on which a single text color satisfies both.
- Note which method a tool reports. Some checkers switch between the two, and an "Lc 75" in a design file isn't the same thing as "4.5:1" in an audit report.
One last point for icon work. Logos are exempt from both 1.4.3 and 1.4.11, so a token logo itself doesn't have to hit any contrast number, under either method. The text labels, buttons and focus rings around it do. Non-text contrast for icons explains where that line falls.