ColorMeUpLAB

APCA vs WCAG: black or white text?

Ask WCAG 2 and APCA whether black or white text goes on a mid-tone background, and they often give opposite answers. Here is the same button, twice.

WCAG picksGet started

black 5.34:1 · white 3.94:1

APCA picksGet started

white Lc 69 · black Lc 40

The two methods measure different things. WCAG 2 compares how much light each color emits. APCA models how readable text looks, and it weighs dark and light colors differently, so light text on a mid-tone scores higher than WCAG’s ratio suggests.

Same color, two answers

Nine hues, all at OKLCH lightness 0.62. Each swatch uses the text color the method picks. At this lightness the two methods disagree on every hue.

WCAG picks

APCA picks

Try it yourself

Drag through the panel. In the shaded band, WCAG picks black and APCA picks white. Below it both pick white; above it both pick black. Change the hue: the band shifts, but it never closes.

oklch(0.633 0.254 19.9)

WCAG picks
AaThe quick brown fox jumps over the lazy dog.

black 5.34:1 · white 3.94:1

APCA picks
AaThe quick brown fox jumps over the lazy dog.

white Lc 69 · black Lc 40

Lightness is easier to judge in a perceptual space; see OKLCH vs HSL for why, and Custom Color Scales for building a scale around it.

Common questions

Which text color should go on my button?

On light and dark backgrounds, WCAG and APCA give the same answer, so use it. On mid-tones, from about OKLCH lightness 0.55 to 0.75 depending on hue and chroma, they split: WCAG picks black and APCA picks white. Put both versions side by side, as on this page, and use the one that reads better at your button’s size and weight.

What does Lc mean?

Lc is APCA’s lightness contrast score. It runs from 0, no contrast, to about 106 for black text on white and 108 for white text on black. Higher reads easier. It isn’t a ratio of two light levels like the WCAG number; it models how strong text looks against its background.

Why can Lc be negative?

The sign is the polarity. Positive means dark text on a lighter background; negative means light text on a darker one. The size of the number is the contrast, so compare absolute values: on #ff0044, white text scores Lc −69 and black scores Lc 40, so white wins.

Open the Generator