APCA Contrast Checker

How to use it

1. Enter the text color, then the background color — hex, rgb(), hsl(), oklch() and CSS color names all parse, and the background must be opaque.
2. Read the Lc slot: the sign is the polarity, the magnitude is what you compare against a level, and the band beneath names the highest published range it reaches.
3. Set the font size and weight to get a verdict from the published lookup table; leave them empty and only the Lc value is reported.
4. Use Swap to see the reverse-polarity design — the number changes, because Lc is not symmetric — and copy or share the pair when you are done.

Enter a text color and a background color to read their APCA Lc value: a signed number from roughly -108 to 106 that carries polarity, the published use-case band, and the minimum the published font-use table asks for at your size and weight. APCA is the metric proposed in the WCAG 3 draft; it is not ratified, and WCAG 2 remains the ratified requirement today. Everything is computed in this tab.

How it works

APCA starts from screen luminance, written Ys. Each sRGB channel is divided by 255, raised to the power 2.4, and the three results are weighted 0.2126729, 0.7151522 and 0.0721750. There is no piecewise segment near black in that step: the 0.04045 / 12.92 kink belongs to the relative-luminance definition WCAG 2 uses, not to this one. For the mid grey #888888 the two definitions give 0.221206 and 0.246201 — a small gap at the input that the rest of the algorithm amplifies.

Very dark colors are then lifted: below Ys 0.022 the value becomes Ys + (0.022 - Ys) raised to the power 1.414, the algorithm's way of accounting for the light a real screen reflects instead of pretending black is black. Which color is lighter decides the branch. Dark text on a light background is scored as (bg ** 0.56 - text ** 0.57) * 1.14, light text on a dark background as (bg ** 0.65 - text ** 0.62) * 1.14, each with a 0.027 offset removed and a ±0.1 dead zone clipped to nothing, and the survivor is multiplied by 100.

Those two branches use different exponents on purpose, which is why Lc has a sign and why it is not symmetric: #888888 on white reads 63.1 while white on #888888 reads -68.5. A quotient of two luminances cannot express that difference — dividing the lighter by the darker gives one number whichever way round the design is drawn — and the perceptual asymmetry between dark-on-light and light-on-dark text is precisely what the sign records.

Because thin strokes need more contrast than thick ones, a single threshold cannot answer the question on its own. The published font-use table pairs 15 sizes from 10px to 96px with the nine hundred-step weights and gives a minimum Lc per cell, or marks the cell as prohibited or as non-content text only. This page reads that table verbatim; it never interpolates between cells.

Examples

#888888 text on #ffffff · 16px/400

Lc            63.1
polarity      Dark text on a lighter background
band          Lc 60
font use      16px/400 requires Lc 90 — 26.9 short
WCAG 2        3.54:1

#ffffff text on #888888 · 16px/400

Lc            -68.5
polarity      Light text on a darker background
band          Lc 60
font use      16px/400 requires Lc 90 — 21.5 short
WCAG 2        3.54:1

#3b82f6 text on #ffffff · 24px/700

Lc            63.9
polarity      Dark text on a lighter background
band          Lc 60
font use      24px/700 requires Lc 45 — 18.9 to spare
WCAG 2        3.68:1

#e0e0e0 text on #111111 · 14px/400

Lc            -87.4
polarity      Light text on a darker background
band          Lc 75
font use      14px/400 requires Lc 100 — 12.6 short
WCAG 2        14.30:1

Every example on this page is executed against the same engine that powers the tool, on every build.

Common errors

`blurple` is not a valid color — expected hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.

The same refusal covers a misspelled name and a notation this field does not register, such as lab(50% 40 30). Nothing is guessed from a near miss, so no Lc value is reported for it.

`rgb(255 255 255 / 50%)` is translucent — the backdrop behind a translucent background is unknown, so the perceptual contrast cannot be computed. Enter the flattened background color.

Half-opaque white sits over something, and that something decides the answer. Read the flattened color out of your browser inspector and enter it. Translucent text is different: it is composited over the background you gave and reported.

The font size and weight lookup needs a size between 1 and 1000 px and a weight between 100 and 900. The Lc value below is still exact.

A weight of 42 or an empty size stops the table lookup and nothing else. The Lc value, its polarity and its band are unaffected, because they never depended on the font.

Color is 257 characters — larger than the 256-character limit for a single color.

A color literal in any registered notation is far shorter than 256 characters, so input past the cap is refused instead of trimmed to something you did not type.

Keyboard shortcuts

⌘/Ctrl + Enter

Re-run the measurement for the current pair and font context.

⌘/Ctrl + S

Download the readout as a .txt file (a browser save-dialog override).

⌘/Ctrl + C

Copy the Lc summary while nothing is selected; a selection copies itself.

⌘/Ctrl + Shift + C

Copy the Lc summary even when text is selected.

t

Advance the theme palette; idle while a color field has focus.

? or ⌘/Ctrl + /

Open the shortcut sheet, where these seven bindings appear with the glyphs your keyboard uses.

Esc

Dismiss the topmost overlay.