WCAG 2 measures contrast as a luminance ratio from 1:1 to 21:1, while APCA, the Accessible Perceptual Contrast Algorithm, outputs a lightness contrast value, Lc, that depends on which color is the text and is read alongside font size and weight. APCA predicts readability more accurately for dark mode and mid-tone colors, but WCAG 2.x AA is still the standard that laws reference. The practical approach is to pass WCAG 2 AA and use APCA as a second opinion.
What APCA is
APCA was developed by Andrew Somers of Myndex as a replacement for the WCAG 2 contrast formula, and it was proposed as the contrast method for WCAG 3. Where WCAG 2 compares two luminance values with a simple ratio, APCA models how perceived contrast changes with the lightness of the background, the lightness of the text, and which of the two is darker. Its output, Lc, runs from roughly −108 to +106.
APCA is designed around text, and the Lc a pair needs depends on how large and heavy the text is. A thin 14px label needs far more contrast than a 32px bold heading, and APCA's guidance scales smoothly with size and weight. WCAG 2 has only two buckets: normal text and large text.
Lc values and polarity
The sign of an Lc value tells you the polarity:
- Positive Lc: dark text on a light background.
- Negative Lc: light text on a dark background.
The sign only reports direction; the magnitude is what you compare against the guidance. Black on white is about Lc 106 and white on black about Lc −108. They are not mirror images, and that asymmetry is deliberate. APCA applies different exponents to text and background in each polarity, because the eye does not respond to light text on a dark field the way it responds to dark text on a light one. WCAG 2 always divides the lighter luminance by the darker, so swapping the two colors gives exactly the same ratio.
Where the WCAG 2 ratio misjudges contrast
The WCAG 2 formula is simple and well tested, but it treats contrast as a ratio of luminances, and human perception does not follow a single ratio across the whole range from black to white. Two failure patterns come up again and again.
Dark mode and dark pairs
Near black, luminance values are tiny. The ratio divides by L2 + 0.05, and when both colors are dark, modest absolute differences in luminance still produce respectable ratios. As a result, WCAG 2 tends to overstate how readable mid-gray text on a near-black surface is. A clear example: #767676 scores about 4.54:1 on white and 4.62:1 on black, so WCAG 2 rates the two as equally good. APCA scores the black-background version at less than half the Lc of the white-background version, which matches how much dimmer gray-on-black text reads. In a dark theme, text that technically passes AA can still look faded.
Mid-tone backgrounds
Saturated mid-tones, the typical colors of buttons and badges, show the opposite side of the same bias. On the indigo #6366F1, WCAG 2 gives white text 4.46:1, a fail, and black text 4.70:1, a pass, so it recommends black. APCA scores white text on that indigo at roughly twice the Lc of black text. Tomato #FF6347 and dodgerblue #1E90FF follow the same pattern: WCAG 2 strongly favors black text (7.12:1 against 2.94:1 on tomato), while APCA rates white text higher. The mechanism is the one behind the dark-mode problem: the ratio gives extra weight to luminance differences near black, so pairing a mid-tone with black scores better than pairing it with white. APCA's model does not carry that bias, which is why it often reverses the verdict for colored buttons.
APCA Lc guidance levels
APCA's simplified guidance ties minimum Lc values to use cases. Font size and weight shift these numbers, so treat them as starting points rather than fixed pass marks:
- Lc 90: preferred for body text and long-form reading.
- Lc 75: the minimum for columns of body text.
- Lc 60: the minimum for other content text you need to read, such as short labels.
- Lc 45: the minimum for large or bold headlines and for non-text elements you must see, like icons.
- Lc 30: the absolute minimum for placeholder text, disabled controls and similar text that does not need to be read fluently.
- Lc 15: the point where elements start to become invisible for many people; anything that matters should sit well above it.
Apply that to the gray example. #767676 on white lands in the 70s, just under the Lc 75 body-text level, while on black it sits around Lc 30, suitable only for placeholder-type text. WCAG 2 passes both as body text.
Current status: WCAG 3 and legal requirements
APCA is not a legal requirement anywhere today. WCAG 3 is still an early Working Draft, and its contrast method, including whether it will use APCA or something derived from it, is not final. The laws and procurement standards in force, including the ADA as applied by US courts and the Department of Justice, Section 508, and EN 301 549 under the European Accessibility Act, all point to WCAG 2.x Level AA and its 4.5:1 and 3:1 ratios. The WCAG contrast ratio guide covers those thresholds and exemptions in detail.
An audit will therefore measure you against the ratio, even where APCA suggests the ratio is wrong. That creates a real constraint: for the indigo button above, the combination APCA prefers, white text, fails WCAG 2 AA. You have to satisfy WCAG 2 first.
A practical recommendation
- Treat WCAG 2.x AA as the floor. Every text pair needs 4.5:1, or 3:1 for large text, and UI component boundaries need 3:1.
- Use APCA as a second opinion, especially for dark themes. If a pair passes WCAG 2 but APCA scores it below the level for its use, raise the contrast; the ratio is probably flattering it.
- For mid-tone brand colors, adjust the color, not just the text. The 20% shade of the indigo,
#4F52C1, gives white text about 6.34:1, so white labels pass WCAG 2 AA while keeping the high APCA score that white text gets. - Aim above the minimums for body text. The thresholds are floors for short text; long reading deserves more.
Try it: compare both scores
The APCA contrast checker shows the WCAG 2.1 ratio with pass or fail for each level and the APCA Lc value with a readability tier, side by side, for any pair. It is the same tool as the contrast checker, so a link like /contrast-checker?fg=ffffff&bg=6366f1 reproduces the indigo button example. To find a darker version of a brand color that passes both methods, generate a scale with the shades tool or the Tailwind palette generator.