Cómo usar: APCA Contrast Checker
- Enter the text and background colors (any CSS format).
- Read the Lc value — higher means more readable. Negative values mean light text on a dark background.
- Check the use-case table to see whether the pair is suitable for body text, headlines or only non-text elements.
- Compare with the WCAG 2 ratio shown alongside, which is still the legal and audit standard today.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm), developed by Andrew Somers for the W3C, is the contrast method proposed for the upcoming WCAG 3 guidelines. Instead of a ratio like 4.5:1, it outputs a lightness contrast value Lc from roughly 0 to 106 (positive for dark text on light backgrounds, negative for light-on-dark). It models how human vision actually perceives contrast, including the effect of font size and weight.
Why APCA instead of the WCAG 2 ratio?
- Polarity aware: WCAG 2 treats white-on-black and black-on-white identically, but our eyes don’t. APCA scores them differently.
- Better with dark mode: the WCAG 2 formula overstates contrast for dark color pairs, so some “passing” dark-theme combinations are hard to read. APCA catches these.
- Fewer false failures: some readable mid-tone pairs, such as white text on orange buttons, fail WCAG 2 while APCA rates them more realistically.
How to read the Lc value
| Lc | Suitable for |
|---|---|
| 90+ | Preferred for body text and long reading |
| 75 | Minimum for body text (~18px regular) |
| 60 | Other content text (~24px regular or 16px bold) |
| 45 | Large headlines and big UI labels |
| 30 | Placeholder text, disabled states, large icons |
| 15 | Minimum for non-text elements such as dividers |
These are simplified “bronze-level” guidelines; the full APCA approach uses lookup tables per font size and weight.
Should I use APCA today?
WCAG 3 is still a working draft and APCA’s final form may change. Accessibility laws and audits (including the European Accessibility Act, which references WCAG 2.1 via EN 301 549) still use the WCAG 2 ratio. The practical approach: meet WCAG 2 AA for compliance, and use APCA as a second opinion — especially for dark themes and large display text. Check WCAG 2 in detail with the Contrast Checker.
También se busca como: apca, wcag 3, lc contrast, perceptual contrast, accessibility, text contrast, silver.
Herramientas que combinan con: APCA Contrast Checker
- Color Blindness Simulator — Upload a screenshot or design and see it through eight types of color vision deficiency side by side — or test a palette for colors that become indistinguishable.
- Generador de colores de Tailwind — Pega un color de marca y obtén una escala de tonos equilibrada de 11 pasos (del 50 al 950) integrada en OKLCH, con sugerencias de contraste y opciones de exportación para Tailwind v3, v4, CSS y SCSS.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.
- Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.