APCA contrast grid
Every colour as text on every other colour as background, scored in APCA lightness contrast (Lc). Unlike a WCAG ratio this is polarity aware, so dark-on-light and light-on-dark are two different readings and the grid is not symmetric.
Advisory, not a compliance test. APCA is a candidate contrast method being developed for WCAG 3. WCAG 3 is a Working Draft: it is unfinished, it is not a standard, and nothing here certifies anything against it.
If you need a conformance result today, that is WCAG 2.x, on the 2.2 grid. Use this one to find pairs that read badly in practice even when the ratio passes, and pairs the ratio punishes that are actually fine.
One per line. Bare hex, name #hex, or a CSS
custom-property block pasted straight from a stylesheet.
Results
Rows are the text colour. Columns are the background behind it. Read a row across to see how one ink performs on every surface.
- Lc 75 and up, body text
- Lc 60 to 75, larger content text
- Lc 45 to 60, headlines and large text
- Below Lc 45, not for readable text
A negative Lc means light text on a dark background. The sign carries the polarity, not the quality: judge the magnitude.
Reading an Lc value
These are the published APCA use-case levels, summarised. They are guidance about what a value is good enough for, not thresholds anything is certified against.
| Lc | What it supports |
|---|---|
| 90 and up | Preferred for body text at any size down to 14px regular |
| 75 | Minimum for columns of body text, roughly 16px regular |
| 60 | Other content text, around 18px regular or 16px medium |
| 45 | Large text and headlines, around 24px regular or 18px bold |
| 30 | Floor for any text at all. Spot text, placeholders, incidental labels |
| 15 | Non-text elements. Dividers, disabled states, decorative boundaries |
Smaller and lighter type needs a higher Lc, and the relationship is not linear, which is the point of the method. Treat the size figures as the middle of a range rather than a line.
How it is calculated
Channels are raised to the power 2.4 and combined with the coefficients 0.2126729, 0.7151522 and 0.0721750 to give screen luminance Y. Values below 0.022 are soft-clamped to model flare in dark tones. Text and background are then raised to different exponents depending on which is lighter, 0.57 and 0.56 for dark text on light, 0.62 and 0.65 for light on dark, scaled by 1.14 and offset by 0.027. Differences under 0.0005 and results inside the low clip return zero rather than a misleading small number. This is APCA-W3 0.1.9.
Where it disagrees with WCAG 2.x
Most visibly on dark backgrounds. WCAG 2.x tends to overrate light grey text on near black, which APCA marks down, and it underrates some mid-tone pairs that read cleanly. Comparing the two grids on the same palette is the useful exercise.
Runs entirely in your browser. Nothing is uploaded, nothing is stored, nothing is logged. All tools