Accessibility Workflow Guide
APCA vs WCAG
APCA and WCAG are both trying to answer the same question: can people actually read this text against this background? The difference is that WCAG gives you a familiar ratio, while APCA focuses more directly on perceptual readability, polarity, and modern UI behavior.
If you are evaluating body text, muted labels, dark surfaces, or button fills, this guide will help you decide what each system is telling you and when to trust each signal.
Quick Navigation
What Is APCA
APCA stands for Advanced Perceptual Contrast Algorithm. Instead of treating contrast as a single ratio that behaves the same way in every context, it tries to model how people actually perceive readability. That matters more in interfaces where text can be light-on-dark, thin, muted, or embedded inside layered components.
In practical product work, APCA becomes useful when a team starts asking harder questions: does this muted label still read well? Is this dark mode card actually comfortable? Does this button fill feel strong enough, or just technically acceptable?
Our APCA Contrast Checker is built for exactly that kind of review, while still keeping the traditional WCAG result visible for teams that need both signals.
How WCAG Contrast Works
WCAG contrast uses a ratio. That ratio is deeply familiar to designers and developers because it is the benchmark most accessibility tooling, design reviews, and compliance checklists still rely on. If you have ever checked for AA or AAA, you were using this model.
The strength of WCAG is consistency. It is simple to explain, easy to compare, and still necessary in many production workflows. The limitation is that the same ratio does not always capture how comfortable something feels when the polarity flips or when typography becomes subtle.
That is why many teams still need the classic Color Contrast Checker and an APCA view side by side.
APCA vs WCAG: Key Differences
WCAG ratio
- Uses a familiar contrast ratio scale
- Maps easily to AA and AAA checkpoints
- Still expected in many design-system reviews
- Best when you need a standardized compliance benchmark
APCA score
- Focuses on perceptual readability instead of a pure ratio
- Responds differently to light text on dark surfaces
- Helpful for muted copy, buttons, and dark mode UI
- Better suited for modern interface states and reading comfort checks
The most important mental model is this: the two systems do not always disagree because one is broken. They disagree because they optimize for different signals. If a pair feels questionable in dark mode or for low-emphasis copy, APCA is often the more revealing metric.
Compare APCA and WCAG on your colors
Use the live checker to test the exact pair you are working with, then inspect how it behaves for body text, muted text, buttons, and dark surfaces.
Open the APCA Contrast CheckerWhen To Use Each
Use APCA when reviewing
- Body text readability in modern UI
- Muted text and metadata labels
- CTA buttons and filled controls
- Dark mode cards and layered surfaces
- Design-system role decisions
Use WCAG when reviewing
- Compliance-oriented documentation
- Existing workflow baselines and checklists
- Quick pass/fail contrast reviews
- Legacy design QA where ratio is still the standard language
- Cross-team comparisons using a familiar benchmark
How To Test With The Tool
- 1. Enter your foreground and background colors as HEX values.
- 2. Compare the classic WCAG ratio with the APCA Lc score for the same pair.
- 3. Review the four scenario previews: body text, muted text, button, and dark mode surface.
- 4. Use the result to decide whether the pair is only technically acceptable or actually readable in context.
If you are also testing how those colors behave across different vision conditions, pair the contrast workflow with the Color Blindness Simulator before locking a production token.
Practical UI Guidance
Do not rely on a single number without looking at the role. A pair that passes for a large button label may still feel weak for body copy.
Dark mode is where teams often discover the limits of ratio-only thinking. If the interface looks technically compliant but still tiring, APCA usually gives a better clue about why.
For design systems, the best practice is not to replace WCAG with APCA overnight. Record both. Use WCAG to preserve compliance language, and use APCA to make better day-to-day readability decisions.
When you are done comparing, go back to the live APCA Contrast Checker and validate the exact roles you intend to ship.
Test your text and background pair now
Run the live APCA workflow, compare the score with WCAG, and use the scenario previews to decide whether your pair is strong enough for production UI.
Test your colors now