About WCAG Color Contrast & APCA Checker
Calculate relative luminance, WCAG 2.1 / 2.2 contrast ratios, and APCA lightness contrast with live typography previews and instant color swapping. 100% private in-browser analysis.
Key Capabilities & Features
- WCAG 2.1 AA & AAA compliance evaluation
- Normal, Large, and UI component contrast checks
- APCA lightness contrast score
- Relative luminance breakdown
- Live typography and button preview
- Instant color swap and preset library
How to Use WCAG Color Contrast & APCA Checker
Select Colors
Pick or enter hex codes for foreground text and background surface.
Review Compliance
Check contrast ratio against WCAG AA (4.5:1) and AAA (7.0:1) thresholds.
Test Typography
Preview live rendered headlines, body copy, and interactive buttons.
Privacy & In-Browser Execution Guarantee
All contrast computations run 100% locally in your browser. Color inputs are never transmitted to any server.
Frequently Asked Questions
What is the minimum WCAG contrast ratio for body text?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal body text (below 18pt or 14pt bold), and Level AAA requires 7.0:1.
What is considered Large Text in WCAG?
Large text is defined as at least 18 point (typically 24px) or 14 point bold (typically 18.66px bold). For large text, Level AA requires 3.0:1 and AAA requires 4.5:1.
What is APCA?
The Advanced Perceptual Contrast Algorithm (APCA) is a candidate method for WCAG 3 that models how the human eye perceives contrast based on spatial frequency, background lightness, and text weight.