ContrastLens
Check color contrast against WCAG 2.2 ratios and the newer APCA model, with a live preview.
Colors
Text size
Preview
The quick brown fox jumps over the lazy dog.
Aa Bb Cc — 0123456789
WCAG 2.2 ratio
21.00:1
| AA | AAA | |
|---|---|---|
| Normal text | ||
| Large text |
APCA score
+106.0 Lc
Excellent — safe for any text size or weight.
How color contrast checking works
The classic WCAG 2.x formula (criterion 1.4.3) converts each color to a relative luminance value, then divides the lighter by the darker:
ratio = (L_lighter + 0.05) / (L_darker + 0.05) // Black (#000) on white (#FFF) → (1 + 0.05) / (0 + 0.05) = 21.00 : 1 (the maximum) // White on white → (1 + 0.05) / (1 + 0.05) = 1.00 : 1 (the minimum)
APCA (Accessible Perceptual Contrast Algorithm) computes luminance with a different gamma curve, applies a soft black-level clamp, and treats light-text-on-dark and dark-text-on-Light polarity differently — producing an Lc score roughly from -108 to +106 instead of a ratio. Both computations run entirely with native JavaScript math in your browser.
Frequently asked questions
What's the difference between the WCAG ratio and APCA?
The classic WCAG 2.x ratio (used by criterion 1.4.3) is a simple luminance ratio between two colors, from 1:1 to 21:1. APCA is a newer, more complex model from the W3C Silver/WCAG 3 research effort that accounts for font size, weight, and the direction of contrast (light-on-dark vs. dark-on-light), producing a perceptually weighted Lc score instead of a ratio.
Is APCA an official WCAG requirement yet?
No. APCA is the algorithm proposed for WCAG 3's draft visual-contrast method, but WCAG 3 has not been finalized or adopted as a standard. Today, WCAG 2.2 criterion 1.4.3 (the classic ratio) is what's legally and formally required; treat the APCA Lc score here as forward-looking guidance, not a pass/fail certification.
Is a passing WCAG ratio always enough?
It's the current formal standard, but it doesn't account for font weight or rendering differences the way APCA attempts to. A pairing can pass the classic ratio and still look weaker than expected on very thin fonts — checking both numbers gives a fuller picture.
Does this tool store or send my colors anywhere?
No. Every calculation (luminance, ratio, and the APCA score) runs locally in your browser with plain JavaScript math; nothing is uploaded.