Color Contrast Checker: WCAG 2 and APCA, Side by Side
Most contrast checkers report one number. That number is the WCAG 2 ratio, and it is the one regulators recognise — but it does not know how large or how heavy your text is, and it is least reliable on dark backgrounds. This checks both models at once, tells you when they disagree, and gives you the nearest shade that passes.
Large heading, 27px bold
Subheading at 19px regular
Body copy at 14px — this is the size that decides most audits, and the size checkers most often flatter.
How to read the two numbers
They are not two opinions about the same quantity. They measure different things, so a pair can pass one and fail the other without either being broken.
| WCAG 2 ratio | APCA Lc | |
|---|---|---|
| Scale | 1:1 to 21:1 | 0 to about ±106 |
| Knows text size | Only "large" vs "normal" | Yes, size and weight |
| Knows polarity | No — symmetric | Yes — swapping changes the score |
| Body text target | 4.5:1 (AA), 7:1 (AAA) | Lc 75 minimum, Lc 90 preferred |
| Legal standing | Yes, referenced by regulation | None — WCAG 3 is still a draft |
Use WCAG 2 to pass an audit. Use APCA to decide whether it is actually readable. When they disagree, the honest move is to satisfy both — which is almost always one small step darker or lighter.
#767676 on white, the canonical "minimum accessible grey" that clears WCAG 2 AA for body text by a hair. Watch what APCA says about it at 14px. That gap is the entire reason this page reports two numbers.The three failures this tool cannot catch
A checker sees two hex values. Real interfaces are messier, and these are the cases that reach production with a green checkmark behind them:
- Text over images or video. The background is a thousand colors and the worst one wins. Sample the lightest region behind the text, not the average.
- Non-default states. Hover, focus, disabled, visited and placeholder text are all separate pairs, and placeholder grey fails more often than any other single value on the web.
- Composited color. Anything built from
opacity,color-mix(), a backdrop filter or a gradient overlay renders as a color that appears nowhere in your stylesheet. Test the rendered result, not the source value.
The third is the one that quietly breaks design systems, because the token you tested and the pixel the user sees are genuinely different colors. We go deeper in checking contrast on any live website.
Checking a whole palette instead of one pair
One pair at a time does not scale. A design system with ten surface colors and six text colors has sixty combinations, and the failures are never in the pairs you thought to test — they are in the disabled label on the hover state of a card.
CSS DNA extracts a site's real colors from its rendered styles and builds a palette-vs-palette grid, scoring every combination under both models at once, with a contrast auto-fix that suggests the nearest passing shade. It runs on any site, including yours, entirely on-device.
Frequently asked questions
What is a good color contrast ratio?
4.5:1 is the WCAG 2 AA minimum for body text and 3:1 for large text (24px, or 18.66px bold). AAA raises those to 7:1 and 4.5:1. Below 3:1, text is failing for most people in most conditions.
What APCA score do I need?
Lc 75 is the working minimum for body text and Lc 90 is preferred for small or thin text. Lc 60 covers larger content text and Lc 45 covers large headings and non-text UI like icons and focus rings.
Why do WCAG and APCA disagree on the same colors?
WCAG 2 divides two luminance values and stops. APCA applies different exponents depending on polarity, soft-clamps near black, and scales its threshold by font size and weight. Mid-greys and light-on-dark pairs diverge most.
Which standard do I have to comply with?
WCAG 2.x. The ADA's web rule, Section 508, EN 301 549 and the European Accessibility Act all reference it. APCA sits in the WCAG 3 draft and carries no legal weight today.
What counts as large text under WCAG?
At least 24px, or 18.66px if bold. Large text only needs 3:1 at AA. Note that APCA moves in the opposite direction — it asks small text for a higher score rather than giving large text a lower bar.
Does it matter which color is the text and which is the background?
Not for WCAG 2 — the ratio is symmetric. It does for APCA, which is asymmetric by design. Use the swap button above to see the Lc change while the ratio stays put.
How do I check contrast across a whole site at once?
Extract the palette and test every foreground/background pair as a grid rather than checking pairs by hand. CSS DNA does this from a site's rendered styles and reports both models per combination.
Audit every pair, not one at a time
A palette-vs-palette contrast grid under both models, on any site — free to inspect.
Add CSS DNA to Chrome — Free