APCA Calculator (WCAG 3.0)

Calculate contrast using the APCA algorithm, the new proposed standard for WCAG 3.0

APCA - WCAG 3.0 Contrast

Advanced Perceptual Contrast Algorithm. More accurate than WCAG 2.1 for modern displays and considers font size/weight.

Text Color

Background Color

Font Settings

Font Size (px)

Font Weight

Sample Text Preview

Secondary text at smaller size

APCA LcWCAG 3.0

+106.0

Passes for selected font

WCAG 2.1 ComparisonLegacy

21.00:1

AA ✓AAA ✓

Use Case Recommendations

✓ Lc ≥ 90

Body Text (14-16px)

✓ Lc ≥ 70

Large Text (24px+)

✓ Lc ≥ 55

Headlines (36px+)

✓ Lc ≥ 60

UI Components

✓ Lc ≥ 45

Non-text Elements

✓ Lc ≥ 30

Placeholder/Disabled

About APCA

APCA is the new contrast algorithm proposed for WCAG 3.0. Unlike WCAG 2.1, it considers text polarity (light/dark), font size, and weight for more accurate accessibility evaluation.

How it works

APCA (Advanced Perceptual Contrast Algorithm) is the new contrast algorithm proposed for WCAG 3.0. It represents a significant improvement over the WCAG 2.1 contrast method.

Why is APCA better?

More accurate: Considers how we actually perceive contrast on modern displays
Typography context: Takes font size and weight into account
Polarity: Differentiates between light text on dark background and vice versa
Use cases: Provides specific thresholds for different UI elements

What is the Lc value?

The Lc (Lightness Contrast) value is APCA's metric. Unlike WCAG 2.1's ratio, Lc can be positive or negative depending on polarity (light/dark text on dark/light background).

Recommended thresholds

Lc 90+: Body text (14-16px)
Lc 75+: Medium text (18px)
Lc 60+: Large text (24px+) and UI components
Lc 45+: Large headlines (36px+) and non-text elements

APCA Adoption

APCA is being adopted by major companies like Google, Microsoft, and Adobe. Tools like Figma and Adobe XD already include APCA support.

💡 Practical Examples

Case 1: Body text in dark mode

You have light gray text #B0B0B0 on dark background #1A1A2E.

→ WCAG 2.1: 7.2:1 ✅ Passes AAA
→ APCA Lc: 68 ⚠️ Only valid for 18px+ text
→ For 14px text, you need Lc 90+ → Use #E0E0E0 → Lc: 85

Case 2: Primary button

Blue button #2563EB with white text #FFFFFF.

→ APCA Lc: 72 ✅ Perfect for 16px bold text
→ WCAG 2.1: 4.5:1 ✅ Passes AA

Case 3: Input placeholder

Input with white background and placeholder #9CA3AF.

→ APCA Lc: 52 ⚠️ Only valid for large auxiliary text
→ For readable placeholder use #6B7280 → Lc: 63

Frequently Asked Questions

What is the difference between APCA and WCAG 2.1?

APCA is more accurate because it considers how we actually perceive contrast on modern displays. WCAG 2.1 uses a simplified formula that can give false positives (colors that "pass" but are hard to read) and false negatives (rejected colors that are actually readable).

What Lc value do I need for my text?

It depends on size: Lc 90+ for body text (14-16px), Lc 75+ for medium text (18px), Lc 60+ for large text (24px+) and UI components, Lc 45+ for very large headlines (36px+).

Why can the Lc value be negative?

APCA considers contrast polarity. A positive value indicates light text on dark background, while a negative value indicates dark text on light background. What matters is the absolute value |Lc|.

Should I use APCA or WCAG 2.1?

If you need to comply with current legal regulations, use WCAG 2.1. If you want to optimize the actual readability of your design, use APCA. Many designers use both: WCAG 2.1 for compliance and APCA for optimization.

When will APCA be officially adopted?

APCA is in active development for WCAG 3.0. Although not yet an official standard, companies like Google, Microsoft, and Adobe are already implementing it in their tools and design guidelines.