Everything is 100% client-side. The tool holds your foreground and background as plain colour values, computes the WCAG relative luminance and contrast ratio, evaluates every AA / AAA and UI-component threshold, and even simulates colour-blindness right in your browser tab — no input is ever sent to a server, and there is no CDN in the processing path. It works offline once the page is cached, and closing the tab discards everything.

WCAG 2.2 sets two conformance levels. For Level AA (the benchmark referenced by the ADA and the EU’s EN 301 549), body text needs a contrast ratio of at least 4.5:1, while large text — 24px or larger, or 18.66px (14pt) and bold — needs 3:1, and the same 3:1 applies to non-text user-interface components and meaningful graphics (SC 1.4.11). Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. This tool shows all of these thresholds as PASS/FAIL live as you type.

A passing WCAG 2 ratio is a minimum, not a guarantee. The WCAG 2 formula is known to be imperfect: thin light-on-dark text can pass yet feel hard to read, and some pairs that technically fail look fine, because the formula ignores font weight, size, polarity and the surrounding brightness. That is exactly why WCAG 3 is developing APCA (Advanced Perceptual Contrast Algorithm). For compliance today you must still meet WCAG 2 AA; treat it as the floor and verify real readability with users, especially in dark mode.

WCAG contrast is defined between two solid colours, so the ratio here ignores any alpha/opacity — if your text or background is semi-transparent, flatten it over the colour actually behind it and check that result. The colour-vision simulations (protanopia, deuteranopia, tritanopia and achromatopsia) use published Viénot and Brettel transform matrices applied in linear light; they illustrate how a pair may collapse for the roughly 1 in 12 men with a colour-vision deficiency, but on an uncalibrated sRGB screen they are approximations of perception, not a per-individual or medical diagnosis.