DevToolKit

WCAG & APCA Contrast Checker

Verify color accessibility with WCAG 2.1 ratios and modern APCA scores. Features real-time vision deficiency simulation and automatic color fixing.

Quick Presets
WCAG 2.1 Ratio5.7:1
Level AA
Normal Text
Pass
Large Text
Pass
Level AAA
Normal Text
Fail
Large Text
Pass
APCA Score (Lc)
77
Good (Body)
Standard for WCAG 3.0. Scores vary by use case (Body vs Header).

Interface Preview

The quick brown fox jumps over the lazy dog.

Designing for accessibility isn't an afterthought; it's a fundamental part of the technical trust we build with our users.

Cautionary Label
Notification
Your color choices influence how easily users can digest critical information.
Was this tool helpful?

How to Use

Designing accessible interfaces starts with choosing the right color combinations. Our tool provides two ways to measure success.

Step-by-Step Guide

  1. Select Colors: Use the hex input or the color picker to define your foreground (text) and background colors.
  2. Check Ratios: Observe the WCAG 2.1 Ratio. Aim for at least 4.5:1 for standard text (AA compliance).
  3. Review APCA: Look at the APCA Score for a more modern, perceptually accurate contrast reading.
  4. Simulate Vision: Use the dropdown to see how your colors look to users with various forms of color blindness.
  5. Magic Fix: If your colors fail, use the Magic Fix buttons to automatically find the closest compliant variation.

About This Tool

Beyond Standard Ratios

While WCAG 2.1 has been the industry standard for years, its mathematical model often falls short in dark mode or with specific color hues (like bright orange or blue).

APCA (Advanced Perceptual Contrast Algorithm) is designed to solve these issues by using a model that more closely follows how the human eye actually processes light and color contrast, accounting for font weight and size as well.

FAQ

What is the difference between WCAG 2.1 and APCA?
WCAG 2.1 uses a simple mathematical ratio (like 4.5:1) which doesn't perfectly match human perception. APCA (Advanced Perceptual Contrast Algorithm) is the draft standard for WCAG 3.0, using a more complex model that accounts for context and color polarity.
What contrast ratio is required for WCAG AA?
For standard text, a contrast ratio of at least 4.5:1 is required. For large text (18pt or 14pt bold), a ratio of 3:1 is acceptable.
How does the Vision Deficiency Simulator work?
The simulator applies standard mathematical color matrices via SVG filters to the preview pane. This allows you to see how your color choices appear to people with Protanopia, Deuteranopia, Tritanopia, or Achromatopsia.
What is the 'Magic Fix' feature?
The Magic Fix button uses the OKLCH color space to find the nearest color to your original choice that meets the selected accessibility target (AA or AAA), preserving your original hue as much as possible.
NavigateOpenEscClose