APCA Quick-Start Guide
Learn about the Advanced Perceptual Contrast Algorithm (APCA) and how it improves color accessibility
What is APCA?
The Advanced Perceptual Contrast Algorithm (APCA) is a modern contrast calculation method that better reflects human visual perception compared to the traditional WCAG contrast ratio.
Key Benefits:
- More Accurate
Better reflects human visual perception
- Faster Calculation
Optimized for modern displays
- Better Accessibility
More precise accessibility standards
APCA vs WCAG:
WCAG: Uses a simple ratio (4.5:1 for AA, 7:1 for AAA)
APCA: Uses Lc (Lightness contrast) scores that consider:
- Text size and weight
- Background complexity
- Human visual perception
Interactive APCA Calculator
Try different color combinations to see how APCA scores compare to WCAG ratios.
Enter hex color code
Enter hex color code
Sample Text
This is how your text looks
WCAG Ratio:
APCA Score:
Very difficult to read
APCA Standards & Guidelines
APCA Lc Score Ranges
Text Contrast Requirements:
- Lc 75+ (Excellent)
Perfect readability for all users
- Lc 60+ (Good)
Good readability for most users
- Lc 45+ (Fair)
Acceptable for normal text
- Lc 30+ (Poor)
Difficult to read
Context Considerations:
- Large Text
Can use lower Lc scores
- Bold Text
Can use lower Lc scores
- Complex Backgrounds
May need higher Lc scores
- Small Text
Requires higher Lc scores
Best Practices
- Test with Real Content
Always test with actual text and background combinations
- Consider Context
Text size, weight, and background complexity matter
- Use Both Standards
APCA for modern apps, WCAG for compliance
- Test with Users
Real user testing is the ultimate validation
Implementation Guide
Here's how to implement APCA in your projects:
Using weableColor Library
Install the library:
npm install @weable-tools/a11y-color-utils
Calculate APCA score:
import { calculateAPCA } from '@weable-tools/a11y-color-utils';
const score = calculateAPCA('#ffffff', '#000000');
console.log('APCA Score:', score);Manual Implementation
For manual implementation, you can use the official APCA algorithm:
// Simplified APCA calculation
function calculateAPCA(foreground, background) {
// Convert to sRGB
const fg = hexToSRGB(foreground);
const bg = hexToSRGB(background);
// Calculate relative luminance
const fgLum = getLuminance(fg);
const bgLum = getLuminance(bg);
// Apply APCA formula
const contrast = Math.abs(fgLum - bgLum);
return Math.round(contrast * 100);
}Need Full APCA Implementation?
Upgrade to the full weableColor library for complete APCA support:
- Full APCA algorithm implementation
- Context-aware contrast calculations
- Batch processing and API access
- Integration with design tools