Contrast methods WCAG 2 and APCA, on 16.8 million color pairs

• The sample. Every color whose red, green and blue are each one of 0, 17, 34 … 255: 4,096 colors, each as text on each as background, 16,777,216 ordered pairs. The grid is even in sRGB code values, not in perceived lightness.
• WCAG 2. The contrast ratio of WCAG 2.2, against 4.5:1 for body text and 3:1 for large text, its AA levels.
• APCA. APCA-W3 0.0.98G-4g, against the minimums of APCA’s Bronze Simple Mode: Lc 75 for body text, Lc 60 for other content text and Lc 45 for large text. The sign of Lc is ignored for the thresholds and used for polarity.
• The comparisons. Three pairings, fixed before the data was looked at: 4.5:1 with Lc 75, 4.5:1 with Lc 60, and 3:1 with Lc 45.

• Of the 2,315,902 pairs that pass 4.5:1, 1,801,542 (77.8%) measure below Lc 75, APCA’s minimum for body text. Only 120 pairs reach Lc 75 and fail 4.5:1.
• At Lc 60 the disagreement runs both ways: 813,520 pairs pass only WCAG 2 and 218,095 pass only APCA.
• The body-text disagreements gather on dark backgrounds: backgrounds with a relative luminance below 0.1 hold 41.8% of the pairs that pass 4.5:1 but not Lc 75, though they are 18.9% of all pairs.
• APCA weighs polarity and WCAG 2 does not: at Lc 60, pairs only APCA passes are 2.5 times as common for light text on dark backgrounds as for dark text on light ones.

APCA |Lc| 0456075112 134.521 WCAG 2 ratio

APCA |Lc| 0456075112 134.521 WCAG 2 ratio

The dark strip along the bottom is real: 1,647,490 dark-on-light pairs and 1,456,975 light-on-dark pairs score exactly Lc 0. APCA reports 0 for any pair below its low-contrast clip, so no pair scores above Lc 0 and below Lc 7.

Body-text disagreement by background lightness

• WCAG 2.2 is a W3C Recommendation, and conformance to it is measured with its own ratio. APCA is a separate method, published by its author with its own guidance; it is not part of WCAG 2.2. This study measures where they differ, not which one is right.
• A pair that passes both meets either method’s minimum. Where they disagree, look at the pair at the size it will be used: the two examples above are the kind of pair each method lets through that the other does not.

• WCAG 2 and APCA, explained
• Check a pair with both methods
• The contrast checker: a WCAG ratio and an APCA score for one pair
• The contrast-pairs dataset: every CSS named color pair

• The grid is a sample, even in sRGB code values; colors used on real sites cluster differently, so the shares here are not shares of real design choices.
• Only the simplest APCA levels are used. APCA’s fuller guidance ties Lc to font size and weight, which this study does not model.
• Flat colors only: no transparency, gradients, images, anti-aliasing, display differences or color-vision deficiency.

The results and figures are CC BY 4.0: share and adapt them, with credit to Auric Artisan. study.mjs is CC0 1.0.

In a folder with study.mjs, with Node.js 18 or later; it takes a few seconds:

node study.mjs --png=.