WCAG & APCA Contrast Checker
Check color contrast against WCAG 2.x accessibility guidelines and APCA — the upcoming WCAG 3 standard. Get instant pass/fail verdicts for AA and AAA levels plus font-size recommendations, all client-side with no data sent anywhere.
The quick brown fox jumps over the lazy dog. Accessibility matters.
Small text sample at 14px — check APCA for minimum font requirements.
WCAG 2 Contrast Ratio
APCA Lightness Contrast
No meaningful contrast
| |Lc| | Body text | UI / labels |
|---|---|---|
| < 45 | Not suitable | 36px+ decorative |
| ≥ 45 | 24px regular | 24px bold |
| ≥ 60 | 16px regular | 16px |
| ≥ 75 | 14px regular | 14px |
| ≥ 90 | Any size | Any size |
Related Developer Tools
Last updated: May 22 2026
Reviewed by the QuickTooly Team
Contrast Checker Guide
Why Use QuickTooly's Contrast Checker?
- Dual standard support: Both WCAG 2.x and APCA (WCAG 3 preview) results side by side.
- Instant live results: Contrast ratio updates as you pick colors — no button required.
- Private & secure: All calculations run in your browser — nothing is sent to a server.
- APCA font guidance: See minimum font sizes for your contrast level, not just a binary pass/fail.
- Visual preview: See your color pair rendered as real text before committing to it.
- 100% free: No registration, no limits, no watermarks.
WCAG 2 vs APCA — What's the Difference?
WCAG 2.x defines contrast using a simple luminance ratio formula. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). AA compliance requires ≥ 4.5:1 for normal text and ≥ 3:1 for large text (18pt regular or 14pt bold). AAA compliance is stricter: ≥ 7:1 for normal text and ≥ 4.5:1 for large text.
APCA (Advanced Perceptual Contrast Algorithm) is the proposed replacement in WCAG 3. Instead of a single ratio, APCA produces an Lc (lightness contrast) score from 0 to approximately ±108. It accounts for the direction of contrast — dark-on-light and light-on-dark behave differently in the human visual system — and ties minimum font sizes to the Lc value rather than applying blanket pass/fail thresholds.
WCAG 2 Compliance Thresholds
- AA — Normal text: Contrast ratio ≥ 4.5:1
- AA — Large text (≥18pt or ≥14pt bold): Contrast ratio ≥ 3:1
- AAA — Normal text: Contrast ratio ≥ 7:1
- AAA — Large text: Contrast ratio ≥ 4.5:1
WCAG AA is the legally required minimum in most jurisdictions (EU EN 301 549, US Section 508). AAA is recommended for essential body text.
APCA Lc Thresholds & Font Guidance
APCA uses the absolute Lc value (|Lc|) for readability guidance. A positive Lc means dark text on a light background; negative means light text on a dark background — only the magnitude matters for the font-size minimums shown above.
- |Lc| ≥ 90: Excellent — any font size or weight.
- |Lc| ≥ 75: Good — 14px regular or 12px bold body text.
- |Lc| ≥ 60: Minimum for 16px regular body text — the APCA recommended body-text floor.
- |Lc| ≥ 45: Suitable for 24px+ text and bold UI labels.
- |Lc| < 45: Insufficient for readable body text — decorative or large display text only.
How to Use This Contrast Checker
- Pick your text color using the foreground color swatch or type a HEX code directly.
- Pick your background color the same way.
- Read the live results — WCAG ratio and pass/fail badges update instantly.
- Check the APCA section for your Lc score and the highlighted row showing your minimum font sizes.
- Use Swap to reverse foreground and background — the WCAG ratio stays the same, but the APCA Lc sign may change.
Who Uses a Contrast Checker?
Contrast checkers are essential for UI/UX designers ensuring WCAG compliance, front-end developers writing accessible CSS, accessibility auditors reviewing websites, product designers building design systems, and content teams creating branded graphics. Both WCAG and APCA scores are required in modern accessibility workflows in enterprise, government, and e-commerce contexts.
Frequently Asked Questions
What is a WCAG contrast ratio?
The WCAG contrast ratio is a number from 1:1 to 21:1 measuring the luminance difference between a text color and its background. It is calculated by dividing the relative luminance of the lighter color (plus 0.05) by that of the darker color (plus 0.05). A ratio of 4.5:1 or higher is required for WCAG AA compliance for normal-sized text.
What is APCA and how is it different from WCAG 2?
APCA (Advanced Perceptual Contrast Algorithm) is the proposed contrast model for WCAG 3. Unlike the WCAG 2 ratio, APCA produces an Lc score that is directional (dark-on-light and light-on-dark are computed differently) and tied to specific font sizes and weights rather than a single pass/fail threshold. It better reflects how the human visual system perceives contrast.
What is the difference between WCAG AA and AAA?
WCAG AA is the minimum legally required level in most countries — it requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold+). AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for body copy and critical reading content but is not always mandated by law.
What counts as "large text" in WCAG?
WCAG defines large text as at least 18pt (24px) in regular weight, or at least 14pt (approximately 18.67px) in bold weight. Text meeting these criteria gets a relaxed contrast threshold of 3:1 for AA and 4.5:1 for AAA, because larger text is easier to read at lower contrast.
Is APCA replacing WCAG 2?
APCA is proposed as the contrast method for WCAG 3, which is still in development as of 2026. WCAG 2.x remains the current legal standard (EN 301 549, Section 508, etc.). Until WCAG 3 is finalized and adopted, both standards are relevant — use WCAG 2 for compliance and APCA for better real-world readability guidance.
Is my color data sent to a server?
No. All contrast calculations happen locally in your browser using JavaScript. No color data is sent to QuickTooly's servers or any third party. The tool works entirely client-side once the page loads.