This tool runs in your browser using JavaScript. If it does not appear, please enable JavaScript or reload the page. The description below explains how it works.
Contrast Checker
A color-pair contrast checker that reports two independent accessibility metrics at once: the WCAG 2.1 contrast ratio (the current legal standard used by AA/AAA conformance) and the perceptually based APCA lightness contrast (Lc). Pick a foreground and a background color, and the page shows a live preview plus signed results for both methods, exactly like the design tools that already test against APCA.
How to use
- Choose the foreground (text) color - use the color picker or type a HEX value such as
#111111. - Choose the background color - for example
#e8e6dd. The preview pane updates instantly. - Read the two result panels. The WCAG 2.1 panel shows the luminance ratio with four pass/fail badges (normal and large text at AA and AAA). The APCA panel shows a signed
Lcvalue and whether it meets the level you select. - Pick an APCA level to check against - body text (Lc 75), content text (Lc 60), large text (Lc 45), or spot text (Lc 30). The tool highlights the highest level the pair actually meets.
- Swap the pair with the Swap button to test the opposite polarity, since light text on dark backgrounds scores differently from dark text on light backgrounds under APCA.
The color inputs accept #rgb and #rrggbb, with or without the # prefix. Everything is calculated client-side - no colors are sent anywhere.
WCAG 2.1 ratio
The Web Content Accessibility Guidelines serve as the baseline for legally required web accessibility in most jurisdictions. WCAG 2.1 compares the relative luminance of two colors with (L1 + 0.05) / (L2 + 0.05) and requires:
| Level | Normal text | Large text (≥18pt / ≥14pt bold) |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
The ratio is polarity-blind: swapping the two colors yields the identical number. A ratio of 21:1 is black on white, 1:1 is two identical colors. This is the number your compliance audit is most likely to ask about.
APCA (Lc)
APCA - the Accessible Perceptual Contrast Algorithm - is an independent, perceptually based contrast method, currently in beta. It was explored for WCAG 3 but removed from the working draft in 2023; the contrast algorithm for WCAG 3 is still undecided. Instead of a luminance ratio it produces a signed lightness contrast value from roughly +106 to −108, where a positive value means dark text on a light background ("BoW") and a negative value means light text on a dark background ("WoB"). The polarity matters because human vision treats the two cases differently.
APCA is perceptually calibrated: unlike WCAG 2, it does not overstate contrast for very dark color pairs, so two dark colors that pass a 4.5:1 ratio may nevertheless score below Lc 45 here. The tool therefore reports a negative sign rather than an absolute value, and you read the magnitude. Common levels:
| Level | Lc minimum | Typical use |
|---|---|---|
| Body text | 75 | Running paragraphs at 16px/400 weight |
| Content text | 60 | 24px/400 or 16px/700, roughly like a 4.5:1 ratio in the mid range |
| Large text | 45 | 36px/400 or 24px/700 headlines, "sort of like" 3:1 |
| Spot text | 30 | Placeholders, disabled text - the floor for anything readable |
The equivalence with WCAG 2 ratios (60 ≈ 4.5:1, 45 ≈ 3:1, 75 ≈ 7:1) only holds for pairs near luminance 0.32–0.40; outside that band APCA and WCAG genuinely disagree. When the two methods conflict, prefer the stricter value - and keep in mind APCA is not part of any normative standard, so WCAG 2 remains the test for conformance.
Worked example
Check dark gray #111111 text on the paper-white background #e8e6dd:
- WCAG 2.1 ratio: about 14.6 : 1 - passes all four AA/AAA badges.
- APCA:
Lc 90.48- comfortably above the Lc 75 body-text minimum.
Now try #767676 on white. The WCAG ratio is about 4.5 : 1, which just passes normal text at AA - but APCA reports roughly Lc 71, below the Lc 75 body-text bar. This is exactly the case where the two standards disagree: APCA holds small gray text to a stricter standard because WCAG overvalues lightened dark colors.
Notes
- The APCA implementation here uses the stable
0.0.98G-4gconstants from the apca-w3 reference (unchanged since February 2021). - APCA is polarity-sensitive: please do not mix up the foreground and background inputs.
- This page is the dedicated companion to the color converter: build the palette there, then verify your chosen text/background pair here.