Color Contrast Checker (WCAG AA/AAA + APCA)

What is a contrast checker?

A contrast checker measures how easily one color can be read against another, then compares that measurement to the numeric thresholds accessibility guidelines actually require. This color contrast checker takes a text color and a background color, computes the WCAG 2 contrast ratio between them, and checks that ratio against all five thresholds the guidelines currently define — for normal text, large text, and interface components, at both the AA and AAA conformance levels. It also computes the same pair’s APCA score, the newer perceptual model being developed for WCAG 3, so you can see where the two disagree.

The WCAG ratio comes from (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color and the formula always runs lighter over darker. That puts every pair somewhere between 1:1 (identical colors) and exactly 21:1 (pure black on pure white, where 1.05 divided by 0.05 is 21). Relative luminance itself weights red, green and blue unevenly — 0.2126, 0.7152 and 0.0722 — so green contributes almost ten times as much as blue to how bright a color reads. That is why luminance is not the same thing as lightness: pure blue and pure yellow sit at the identical 50% HSL lightness, but blue’s relative luminance is 0.0722 against yellow’s 0.9278. White text on that blue reaches 8.59:1 and passes AA comfortably; white text on that yellow drops to 1.07:1 and is essentially unreadable, despite both backgrounds being “50% light” by the naive measure.

Two details make the numbers trustworthy rather than just plausible. Both formulas are only defined for opaque color, so when you set an 8-digit hex with an alpha channel, the tool composites it against the other field’s color first and shows you the resulting opaque hex — black text at 60% opacity on white composites to #666666, a 5.74:1 ratio, not the 21:1 the black value alone would suggest. And the displayed ratio is always rounded down, with every pass or fail decided on the unrounded number underneath — a pair like #118A11 on white sits at 4.4994:1, and a checker that rounds to two decimal places will show “4.50” next to a green check mark for a pairing that, by the letter of the guideline, fails.

How to check color contrast

1. Set your text color. Type a hex value into the Text color field — 3, 6 or 8 digits, with or without the leading #, where an 8-digit value’s last pair sets opacity — or click the swatch next to it to open your OS color picker.
2. Set your background color, or swap the two. Do the same in the Background color field. If you picked the pair backwards, the swap button between the two fields exchanges text and background in one click rather than making you retype both.
3. Read the ratio, the five pass/fail rows, and the APCA panel. The preview panel repaints in your background color with the sample sentence at 16px regular, 18.5px bold and 24px regular, plus a bordered box standing in for a UI component, so you can judge the pairing by eye as well as by number. Below it, the large ratio readout and five rows — AA normal text, AA large text, AAA normal text, AAA large text, and UI components and graphics — show a pass or fail against each guideline threshold, and the APCA panel below that shows the Lc value and the level it reaches. If AA normal text fails, nearest passing color chips appear with the closest darker and lighter version of your text color that clears 4.5:1; click one to apply it directly.

What the levels actually mean

AA is the level nearly every accessibility law and audit actually points at: normal text needs 4.5:1, large text needs 3:1. AAA is the stricter, optional tier layered on top — 7:1 for normal text, 4.5:1 for large text — and most sites aim for AA rather than AAA because AAA is genuinely harder to hit with a real color palette, not because it doesn’t matter. Separately, SC 1.4.11 covers UI components and graphics — icons, input borders, focus indicators — at 3:1, and it’s the row most contrast checkers skip even though it applies to plenty of interface work that has nothing to do with paragraph text.

“Large text” has a precise definition that most checkers state without ever converting: at least 18 point, or 14 point if the text is bold. WCAG’s own Understanding document defines 1 point as 1.333px, which puts the thresholds at about 24px regular or 18.5px bold — the exact two sizes this tool’s preview renders alongside plain 16px body text, so you can see which row of the pass/fail table you’re actually reading against.

The gray boundary is a good way to feel how narrow AA’s margin actually is: on white, #767676 is the lightest gray that clears 4.5:1, at 4.54:1 — one step lighter, #777777, comes in at 4.47:1 and fails. On black, #757575 is the darkest gray that clears 4.5:1, at 4.55:1. Because those two boundaries land on adjacent byte values, exactly two grays in the entire palette, #757575 and #767676, pass AA against both pure black and pure white; every other gray fails against at least one of them.

Where the two standards disagree, and what this tool cannot tell you

The clearest example of the two standards disagreeing is a single gray, #888888. Set it as text on a white background and it measures 3.54:1 — a clean AA fail. Set the identical gray on black and it measures 5.92:1 — a clean AA pass. APCA reverses both verdicts: that same gray on white scores Lc 63.1, clearing APCA’s Lc 60 threshold for general content text, while on black it scores only Lc -38.6, which clears nothing but APCA’s Lc 30 absolute floor for any text at all. One gray, two backgrounds, and the two models don’t just disagree on the number — they swap which background is the safer choice.

That disagreement isn’t a one-off. Across all 65,536 gray-on-gray pairings, 6,407 pass WCAG AA while scoring below APCA’s Lc 60 — the worst is #757575 text on a #020202 background, which reaches a clean 4.50:1 AA pass yet only Lc 29.6, below even APCA’s Lc 30 floor for any text whatsoever. That near-black blind spot is precisely what APCA was built to correct, and it’s why WCAG 2’s ratio is poor guidance once you’re designing a dark interface. The reverse case is much rarer — only 11 gray pairs fail AA while clearing APCA’s Lc 75 body-text minimum, the strongest being white text on #777777, which fails AA at 4.47:1 but reaches Lc 76.6. Underlying both examples is an asymmetry the WCAG ratio can’t see at all: black text on white measures Lc 106.04, but white text on black measures Lc -107.88, not the mirror image you’d expect — while the WCAG ratio is perfectly symmetric no matter which color you call text and which you call background, verified here across thousands of pairs.

None of this makes APCA a substitute for AA. WCAG 3 and APCA are both still a working draft and a candidate method — not a legal requirement anywhere today — so when a contract, a lawsuit or an audit is on the line, the number that counts is still the WCAG 2 AA ratio; APCA is shown here for information, not compliance. Both numbers also assume more than they’re often given credit for: they compare two flat, opaque, sRGB colors, so text over a photograph, a gradient or a translucent overlay has a different ratio at nearly every pixel and needs a human checking the worst pixel by hand, not a single score. Neither algorithm knows the typeface at all — WCAG 2’s only concession to weight is its one bold rule for large text, so a hairline 300-weight and a heavy 900-weight at an identical size get an identical verdict despite reading very differently. A wide-gamut color from a Display P3 screen is simply outside what either model describes. And passing is not the same as readable: line length, letter spacing, screen brightness and the light in the room you’re actually reading in are all real, and none of them appear in either number. One control this tool doesn’t extend to: it composites a translucent text color for you, but not a translucent background — if your background itself has an alpha channel, composite it against whatever sits behind it first and paste in the flat result.

Why is it free?

Every calculation on this page — the luminance math, the WCAG ratio, the APCA score, the nearest-passing-color search — runs in your browser the moment you type or pick a color. Nothing is uploaded, because there’s nothing to upload: two colors never need to leave your machine to be compared. There’s no account to create, no watermark on anything you’d export, and no premium tier gating the APCA panel or the pass/fail rows behind a paywall — it’s the same free tool whether you check one color pair or a hundred.