Contrast Checker - WCAG & APCA Accessibility Tool | Color Picker Studio

Contrast Checker

Advanced accessibility checker with WCAG 2.1, APCA (WCAG 3.0), typography, and component previews.

♿ 100% Client-Side - All accessibility checks happen in your browser.
12.63:1
WCAG 2.1 Contrast Ratio
AA NormalPASS
AA LargePASS
AAA NormalPASS
AAA LargePASS

📋 Live Preview

Sample Heading

This is how your text will look with the selected color combination. Ensure it is easy to read for everyone, including those with visual impairments.

🔬 APCA - Accessible Perceptual Contrast Algorithm

The upcoming WCAG 3.0 standard. Considers font size, weight, and polarity for more accurate predictions.

Lc 0
—
Usage Guidelines:
  • Lc 90+ → Excellent for body text
  • Lc 75+ → Preferred for body text
  • Lc 60+ → Minimum for large text / headings
  • Lc 45+ → Only for very large display text
  • Lc 30+ → Not recommended for readable text

🔤 Font Size & Family Tester

See how your colors perform across different font sizes and typefaces.

🎨 UI Component Preview

Test your colors in real UI components to ensure accessibility across your design system.

💡 Smart Color Fix Suggestions

If your colors fail WCAG, click any suggestion below to auto-fix the foreground while keeping hue close.

📦 Export CSS Code

Why Use Our Contrast Checker?

The most advanced accessibility testing tool for designers and developers.

♿

WCAG 2.1 AA/AAA

Check your colors against all 4 WCAG 2.1 standards (AA/AAA for normal and large text) instantly.

🔬

APCA (WCAG 3.0)

Test with the upcoming WCAG 3.0 algorithm that considers font size, weight, and polarity.

🔤

Typography Tester

Preview your colors across multiple font sizes (12-72px) and font families (sans, serif, mono).

🎨

Component Previews

See how your colors look on buttons, links, alerts, and cards - real UI elements.

💡

Smart Fix Suggestions

Get 5 alternative foreground colors that pass WCAG while staying close to your original.

📦

4 Export Formats

Export as inline CSS, CSS variables, SCSS, or Tailwind config. Ready for any project.

Frequently Asked Questions

What is the difference between WCAG 2.1 and APCA?+

WCAG 2.1 uses a simple luminance ratio (4.5:1 for AA). APCA (Accessible Perceptual Contrast Algorithm) is the upcoming WCAG 3.0 standard that considers font size, weight, and polarity for more accurate readability predictions.

What are WCAG AA and AAA standards?+

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most websites target AA compliance.

What counts as 'large text' in WCAG?+

Large text is 18pt (24px) regular or 14pt (18.66px) bold and larger. Large text has relaxed contrast requirements (3:1 for AA) because it's easier to read.

How does the Smart Fix feature work?+

When your colors fail WCAG, the tool generates 5 alternative foreground colors that pass AA while staying as close as possible to your original color's hue and saturation.

What is APCA Lc value?+

APCA outputs Lc (Lightness Contrast) from 0 to 106. For body text, Lc ≥ 75 is preferred, ≥ 90 is excellent. For large headings, Lc ≥ 60 is acceptable.

How do I test different font sizes?+

In the Typography tab, view your colors across 7 different font sizes from 12px to 72px. The tool automatically shows which sizes meet WCAG standards.

Can I test UI components?+

Yes! The Components tab shows your colors applied to buttons, links, alerts, and cards - the most common UI elements where contrast matters.

Why is contrast important for accessibility?+

About 2.2 billion people worldwide have vision impairments. Good contrast ensures everyone - including those with low vision, color blindness, or aging eyes - can read your content.

What export formats are available?+

Export your passing color combo as CSS variables, SCSS variables, Tailwind config, or inline CSS. All formats are ready to paste into your project.

Is this tool private?+

Yes, 100% free and private. All calculations happen in your browser - your colors never leave your device.

Copied!