The missing introduction to APCA

What is APCA?

The Accessible Perceptual Contrast Algorithm (APCA) is a new algorithm to estimate the visual contrast between two colors. It was developed to address some issues in earlier algorithms, especially for dark colors.

APCA was created by Andrew Somers (Myndex) and was at some point in the discussion for the next major version of the W3C Accessibility Guidelines (WCAG).

An interactive demo is available at https://xi.github.io/apca-introduction/tool/.

Algorithm

function sRGBtoY(srgb) {
  var r = Math.pow(srgb[0] / 255, 2.4);
  var g = Math.pow(srgb[1] / 255, 2.4);
  var b = Math.pow(srgb[2] / 255, 2.4);
  var y = 0.2126729 * r + 0.7151522 * g + 0.0721750 * b;

  if (y < 0.022) {
    y += Math.pow(0.022 - y, 1.414);
  }
  return y;
}

function contrast(fg, bg) {
  var yfg = sRGBtoY(fg);
  var ybg = sRGBtoY(bg);
  var c = 1.14;

  if (ybg > yfg) {
    c *= Math.pow(ybg, 0.56) - Math.pow(yfg, 0.57);
  } else {
    c *= Math.pow(ybg, 0.65) - Math.pow(yfg, 0.62);
  }

  if (Math.abs(c) < 0.1) {
    return 0;
  } else if (c > 0) {
    c -= 0.027;
  } else {
    c += 0.027;
  }

  return c * 100;
}

(Source)

Thresholds

The required contrast in APCA depends on font size and weight and is defined in a table:

| | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |------|-----|-----|-----|-----|-----|-----|-----|-----|-----| | 12px | — | — | — | — | — | — | — | — | — | | 14px | — | — | — | 100 | 100 | 90 | 75 | — | — | | 15px | — | — | — | 100 | 90 | 75 | 70 | — | — | | 16px | — | — | — | 90 | 75 | 70 | 60 | 60 | — | | 18px | — | — | 100 | 75 | 70 | 60 | 55 | 55 | 55 | | 21px | — | — | 90 | 70 | 60 | 55 | 50 | 50 | 50 | | 24px | — | — | 75 | 60 | 55 | 50 | 45 | 45 | 45 | | 28px | — | 100 | 70 | 55 | 50 | 45 | 43 | 43 | 43 | | 32px | — | 90 | 65 | 50 | 45 | 43 | 40 | 40 | 40 | | 36px | — | 75 | 60 | 45 | 43 | 40 | 38 | 38 | 38 | | 42px | 100 | 70 | 55 | 43 | 40 | 38 | 35 | 35 | 35 | | 48px | 90 | 60 | 50 | 40 | 38 | 35 | 33 | 33 | 33 | | 60px | 75 | 55 | 45 | 38 | 35 | 33 | 30 | 30 | 30 | | 72px | 60 | 50 | 40 | 35 | 33 | 30 | 30 | 30 | 30 | | 96px | 50 | 45 | 35 | 33 | 30 | 30 | 30 | 30 | 30 |

For body text, the thresholds are even more restrictive:

| | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |------|-----|-----|-----|-----|-----|-----|-----|-----|-----| | 12px | — | — | — | — | — | — | — | — | — | | 14px | — | — | — | 100 | 100 | 90 | 75 | — | — | | 15px | — | — | — | 100 | 90 | 75 | 85 | — | — | | 16px | — | — | — | 90 | 75 | 85 | 75 | — | — | | 18px | — | — | 100 | 75 | 85 | 75 | 70 | — | — | | 21px | — | — | 90 | 70 | 75 | 70 | 65 | — | — | | 24px | — | — | 75 | 75 | 70 | 65 | 60 | — | — | | 28px | — | — | 85 | 70 | 65 | 60 | 58 | — | — | | 32px | — | — | 80 | 65 | 60 | 58 | 55 | — | — | | 36px | — | — | 75 | 60 | 58 | 55 | 53 | — | — | | 42px | — | — | — | — | — | — | — | — | — |

Comparison to WCAG 2.x

• WCAG 2.x produces a ratio between 1:1 and 21:1. APCA produces a value between -108 and 105.
• Unlike WCAG 2.x, APCA reports different values when you switch foreground and background.
• The result of APCA is negative for light text on dark background. You will usually work with the absolute value though.
• WCAG 2.x defines three thresholds: 3:1, 4.5:1, and 7:1. In APCA, thresholds depend on other factors such as font size and weight.
• Compared to WCAG 2.x, APCA reports drastically lower contrast for darker colors. It also reports slightly higher contrast for lighter colors.

Also see my detailed analysis.

Examples

Status

WCAG is an important standard that is a normative part of many laws all over the world. If APCA will be part of WCAG 3 it will have a huge impact. However, currently both WCAG 3 and APCA are still in early development. Neither is officially recommended by the W3C yet. Also, any mention of APCA has been removed from the WCAG 3 draft in 2023.

Evaluating a contrast algorithm is extremly difficult because contrast perception varies from person to person and also depends on the lighting conditions. Whether APCA is actually better than WCAG 2.x is therefore hard to tell. I personally could not say from the examples above which one works better for me. A rigorous scientific evaluation is not yet available (issue).

Why this document

The original author has published a lot of information on APCA. So why did I create this introduction?

For one it was born out of my personal frustration with the original documentation. Some important pieces of information (e.g. the actual algorithm) get buried under all that text.

It also contains a lot of misleading statements. For example, it claims that the WCAG 2.x algorithm is not based on human perception (which it is) and that it produces "invalid results", which the author only substantiates by anecdotal evidence. So I felt like there was room for a more balanced introduction.

Also, contributing upstream fixes is not an option because the author is hostile to a critical examination of their work. You can find ample evidence of their behavior in the issue tracker of this repo.

If you want to dig deeper, I recommend to start with the original WCAG issue and the documentation README.