Contrast Checker
Two colors in, WCAG and APCA out, plus the nearest color that actually passes. Or paste a URL. The two-color math never leaves this tab.
The quick brown fox
Body text at 16px. Large text is 18pt or 14pt bold.
4.48:1
(1.000 + 0.05) / (0.184 + 0.05) = 4.48
APCA Lc 71.1
- AA normal textFail
- AA large textPass
- AAA normal textFail
- AAA large textFail
- UI graphicsPass
Nearest foreground that reaches AA 4.5:1 is #767676, at 4.54:1.
The two colors stay in this tab
Most contrast pages are a pair of hex boxes in front of a form. You type a gray, they tell you fail, and that is the end of it. This page does the math here. Open the network panel, change a color, and you will not see the hex go out. oklch, lab, lch, hsl and the old named colors all parse in the same box. I got tired of converting a modern CSS token back to hex so a checker from 2012 would look at it.
The formula is the WCAG 2 one, written out with the two luminances. AA for normal text is 4.5:1. AAA is 7:1. Large text can pass at 3:1. Those numbers come from WCAG 2.2 success criteria 1.4.3 and 1.4.6, not from a model that guessed. Open the network panel, change a color, and you will not see the hex go out. That is the two-color path. The URL path is the exception, and the page says so at the top of that tab.
A red X is not an answer
If the pair fails, the page walks lightness in OKLCH and finds the nearest color that clears 4.5:1. Hue stays put. You can apply that color in one tap and copy the hex or the oklch. WebAIM will tell you the gray failed. It will not hand you the gray that would have passed.
That is the whole reason this exists next to the checkers you already have. Chrome's own panel is the other one people open, and a thread on r/webdev asked for a tool that can take a URL instead of hex fields, because that panel does not always work. The other comment in the same thread asked for oklch. Both of those are here.
The URL path fetches, then throws the page away
A tab cannot read computed styles from another origin. So the URL box posts the address to our server, the server fetches the HTML and the same-origin stylesheets, pulls out color and background pairs, scores them, and returns the scores. The HTML is not stored. robots.txt is respected. Private addresses are refused.
I am not going to pretend this is a headless browser. Colors that only exist after a client render will not show up. If the audit misses a pair, paste those two values into the first tab. That tab does not need the network at all.
WCAG and APCA, on the same pair
APCA reports a lightness contrast, Lc, instead of a ratio. It is the model a lot of people now prefer for body text on a dark background, where WCAG 2 can look too kind. This page shows the signed Lc next to the WCAG table. It does not turn Lc into a pass or fail badge, because APCA's published cutoffs are still moving and WCAG 2 is the one a reviewer will cite.
If you came here from a design review, start with the two-color tab and the suggested color. If you came here with a live site, use the URL tab and then fix the failing rows one at a time. A pair that already meets 4.5:1 does not get a fake improvement. The page just shows AAA and the APCA number and leaves the rest to you.
I wrote up why the hex field is the wrong box on the blog. Nearby: JSON formatter, merge PDF, and Markdown to PDF.
Common questions
Does the two-color check leave this tab?
The two colors stay in this tab. The ratio, the APCA number and the suggested color are all math in JavaScript here. After the page has loaded you can unplug the cable and still type hex or oklch. The URL audit is the one exception: that path asks our server to fetch the page, because a browser tab is not allowed to read another site's CSS. The server does not keep the HTML.
What is the difference between WCAG and APCA?
WCAG 2 contrast is the ratio (L1 + 0.05) / (L2 + 0.05). AA for normal text is 4.5:1. AAA is 7:1. That is the number still written into WCAG 2.2. APCA is a newer model that reports a lightness contrast (Lc) instead of a ratio. This page shows both. It does not pick a winner for you.
Why can I paste oklch here?
Because that is how a lot of CSS is written now, and the common checkers still want a hex field. Type oklch, lab, lch, hsl or a named color. The swatch and the math use the same parsed color.
Does the URL audit run the page's JavaScript?
No. It reads the HTML and the stylesheets. Colors that only appear after a client render, or only inside a bundled script, will not show up. If a pair is missing, paste those two colors into the first tab.