ContrastLens

What is ContrastLens?

Color contrast is how much a text color stands out against its background — low contrast (like light gray on white) is hard to read, especially for people with low vision. ContrastLens measures that difference between any two colors and scores it against the WCAG accessibility standard and the newer APCA model, so you can confirm a text/background pairing is actually legible before you ship it.

How to use ContrastLens

1. Enter or pick your text color in the Text field, and your background color in the Background field (type a hex value or use the color swatch).
2. Watch the live Preview panel update with your actual colors.
3. Toggle Normal or Large / bold under Text size to match how the text will actually appear.
4. Check the WCAG 2.2 ratio and APCA score cards — green badges mean that pairing passes for that text size.
5. Use Swap to flip the two colors, or Random pair to try a new combination.

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.