Accessibility Color Checker

The single most useful thing to understand about accessible color is that contrast is about luminance — how much light a color reflects to the eye — not hue. The WCAG formula linearizes each channel out of its sRGB gamma, weights them by the eye's sensitivity (green counts more than three times as much as blue), and compares the brighter against the darker. That's why two colors can look pleasantly different and still fail: if their luminances are close, the text smears into the background for anyone with reduced acuity, in bright sunlight, or on a cheap panel.

The thresholds aren't arbitrary. 4.5:1 for normal text is calibrated to keep body copy legible for users with roughly 20/40 vision without assistive tech; 7:1 (AAA) targets 20/80. Large text gets a pass to 3:1 because thicker strokes carry more light. And since WCAG 2.1, the same 3:1 minimum extends to the things people forget — focus rings, input borders, icons that carry meaning — because an invisible focus indicator is an accessibility failure even when the text is perfect.

When a pair fails, the instinct is to reach for black or white, but that throws away the brand. The better move is the smallest perceptual change that clears the bar, which is exactly what the fix-it here does: it walks the OKLCH lightness axis, holding your hue and chroma fixed, and returns the nearest lightness that passes. The result still reads as your color — just light or dark enough to be legible.

Finally, contrast is necessary but never sufficient. A red/green pair can ace the ratio and still be meaningless to a red-green color-blind reader if hue is the only signal. Use this checker to win the luminance battle, then build redundancy — labels, icons, patterns — so meaning survives. Convert and inspect any color in the Multi-Format Converter, and build an even, accessible range in the Color Scale Generator.