Contrast is not symmetric

The familiar WCAG contrast ratio takes two luminances and divides. Swap which one is the text and you get exactly the same number. But your eye does not treat those two cases the same, and on a dark interface that difference is the whole problem.

The same two colors in both halves, polarity swapped. Rows get thinner going down. Compare where each side stops being comfortable.

Light text on dark tends to bloom: bright strokes spread into the dark surround inside your eye, so thin light text on black gets fatter and mushier than the same weight of dark text on white. Which is why a weight that reads cleanly on the right side of that demo can feel soft on the left.

Why the ratio cannot see it

ratio = (Llighter + 0.05) / (Ldarker + 0.05)   // symmetric by construction

// #B8BAC7 on #1A1C24 and #1A1C24 on #B8BAC7 score IDENTICALLY,
// and they do not read identically

The formula has no term for which color is the text. It also uses a fixed offset that behaves oddly at the dark end, which is exactly where a neon-on-dark interface lives.

What APCA does differently

APCA, the perceptual contrast algorithm developed for the newer accessibility guidance, is polarity aware. It gives a signed value, Lc, where the sign tells you which way round the pair is:

Rough anchors for the magnitude: about Lc 90 for body text, Lc 75 for larger or heavier text, Lc 60 for substantial headings, and Lc 45 as a floor for large display type. Below about Lc 30 something is decorative, not readable.

What it means for a dark interface

The practical consequence is that on dark backgrounds you usually need more weight or more size at the same nominal contrast than you would on light, because the bloom eats thin strokes. Going lighter in color is often the wrong lever: past a point it increases the bloom rather than the legibility.

Combined with the depth effect, this is why saturated colored body text on black is close to the worst possible choice: it is blooming and floating at the same time.

Rules of thumb

  1. A symmetric ratio cannot describe an asymmetric effect. Use a polarity-aware measure for dark UI.
  2. Light on dark needs more weight than the same nominal contrast on light.
  3. Reach for weight and size before reaching for a brighter color.
  4. Do not mix APCA numbers with the old ratio thresholds. Different scales entirely.
  5. Test at the smallest and thinnest thing you actually ship, not at a heading.

All 61 notes How to use them Credits