Contrast checker

Each colour is turned into its relative luminance the way WCAG 2 defines it: the sRGB channels are divided by 255, linearised (the piecewise curve, not a plain 2.2 power), then weighted 0.2126 red, 0.7152 green, 0.0722 blue. The ratio is (lighter + 0.05) ÷ (darker + 0.05), which runs from 1:1 for two identical colours to 21:1 for black on white. Anything you can write in CSS is accepted — #abc, #aabbcc, rgb(0 0 0), hsl(30 40% 50%), a colour name — because the page hands it to the browser's own parser rather than guessing. A transparent colour is composited over the background first, and the page says it did that.

The thresholds are WCAG 2.1: 4.5:1 for normal text at AA, 3:1 for large text (18.66px bold or 24px and up), 7:1 and 4.5:1 for AAA, and 3:1 for interface parts and meaningful graphics — a form border, an icon that carries meaning, the edge of a button. Nearest pass keeps the hue and walks the text colour lighter or darker in small steps until AA for normal text is met, and prints the first shade that does; if the background is a mid tone, moving the background instead is often the better fix.

Two honest limits. The ratio is a formula, not eyesight: it ignores font weight, the rendering of thin strokes, and what a screen does at low brightness, so a pass at 4.6:1 in a hairline weight can still read badly. And WCAG 2 is known to be unkind to light text on dark grounds and generous to mid-tone pairs — the newer APCA model in WCAG 3 handles that better, but it is not final and is not what audits are run against today, so this page states the standard in force rather than the one coming.

Everything is worked out in this tab. Nothing is uploaded and nothing you type is stored; the Dark button keeps its own setting in this browser's local storage.