Pick two colors and see whether real text on them is actually readable — the WCAG ratio, what passes at each text size, and the smallest change that fixes it.
Body text fails AA — short by 0.12.
Readable at a glance?
This paragraph is the one most people actually read. Drag the size slider under the preview and watch the rules change the moment the text counts as large.
Caption · 13px · the size everyone forgets to check
| Sample | Size | Counts as | AA | AAA |
|---|
Keeps the hue and saturation, moves only lightness — the smallest visible change that clears the bar.
Each color is converted from sRGB to relative luminance: every channel is
normalized to 0–1, linearized with the sRGB transfer curve, then weighted
0.2126R + 0.7152G + 0.0722B — green counts for most because eyes
are most sensitive to it. The ratio is
(Llight + 0.05) / (Ldark + 0.05), which lands
between 1:1 (identical) and 21:1 (black on white).
WCAG 2.1 asks for 4.5:1 on body text and 3:1 on large text at level AA, and 7:1 / 4.5:1 at AAA. Large means 24px or bigger, or 18.66px and bold. Icons, borders and other non-text things need 3:1.
The suggestion converts the color to OKLCH, holds hue and chroma still, and binary searches lightness in both directions for the closest value that clears the target, pulling chroma in if the result would fall outside sRGB. It nudges past the rounding to 8-bit hex so the applied color really passes, not just the math before rounding. The displayed ratio is rounded down for the same reason — a 4.4996 never shows as 4.50 next to a FAIL.
Worth knowing: this formula is a blunt instrument. It over-rates dark-on-light pairs at the light end and under-rates some mid-tones, which is why newer perceptual models exist. It is still the number everyone checks against, so it is the number here.