APCA Contrast Calculator
Calculate perceptual contrast using APCA (WCAG 3) with real-time font size and weight pass/fail results.
Part of A11y Suite · Built by Sandeep Upadhyay
- APCA Lc contrast calculation
- Font size and weight lookup table
- Bronze / Silver / Gold conformance levels
APCA Contrast Calculator
APCA Lc value
104.8
Dark text on light bg
WCAG 2.x ratio
18.10:1
Legacy reference only
APCA conformance
Lc ≥ 75 — minimum recommended for body text
Font size / weight — pass/fail at Lc 105
Hover a cell to preview that text size and weight in your chosen colours.
| Weight → | 12px | 14px | 16px | 18px | 24px | 32px | 48px |
|---|---|---|---|---|---|---|---|
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 400 | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 500 | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 600 | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 700 | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 800 | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 900 | ✗ | ✗ | ✓ | ✓ | ✓ | ✓ | ✓ |
Min size per weight at Lc 105: 100: 104.82px · 200: 39px · 300: 25px · 400: 18.5px · 500: 15px · 600: 14.5px · 700: 13.5px · 800: 12.5px · 900: 16px
Understanding APCA conformance levels
When to use APCA Contrast Calculator
- Designing for dark mode interfaces: WCAG 2.x contrast ratios systematically overstate contrast near black, making dark-mode text appear to pass even when it is unreadable. Run your dark-mode colour pairs through APCA to get an accurate perceptual result.
- Choosing font sizes for a design system: The font lookup table shows the minimum size and weight required for each Lc value. Use this to define your type scale tokens so that every text style is guaranteed accessible at your target conformance level.
- Checking UI components and icons: WCAG 2.x has no clear rule for non-text contrast of icons and UI elements beyond a 3:1 ratio. APCA at the Gold level (Lc 45+) provides a perceptually accurate threshold for icon readability.
- Working with Material Design 3 or Carbon colour systems: Both IBM Carbon and Material Design 3 are incorporating APCA-aware guidance. Use this tool to verify that your colour token assignments meet APCA thresholds, not just WCAG 2.x ratios.
How APCA measures perceptual contrast
APCA (Accessible Perceptual Contrast Algorithm) replaces the simple luminance ratio used by WCAG 2.x with a model that matches how human vision actually perceives contrast. The core difference is that APCA is polarity-aware: light text on a dark background produces a different Lc (Lightness Contrast) value than dark text on a light background, even with the same two colours. WCAG 2.x treats both directions identically, which causes it to overstate contrast near black in dark-mode interfaces.
The algorithm converts each colour from sRGB to a perceptual lightness value using a power curve that approximates the non-linear response of the human visual system. It then computes the signed difference between foreground and background lightness, yielding an Lc value on a scale from roughly -108 to +106. By convention, negative Lc indicates light text on a dark background (normal polarity) and positive Lc indicates dark text on a light background (reverse polarity). The tool displays the absolute value for readability.
Lc values map to font size and weight requirements through a lookup table developed by Myndex Research. At Lc 75 (the Bronze minimum), regular-weight body text requires at least 16px. At Lc 90 (Silver preferred for body copy), smaller sizes and lighter weights become usable. The Gold level at Lc 45 covers large text and UI components only. This means a single Lc value replaces three separate WCAG thresholds (AA normal, AA large, AAA) with a continuous, context-aware scale.