katlab tools/color

Color Contrast Checker & Converter

Check WCAG AA/AAA contrast between two colors and convert any color between HEX, RGB, HSL and OKLCH — live, in your browser.

Everything runs locally. Nothing is uploaded to a server.

Text color

Background color

Large text sample
Normal body text sample — the quick brown fox jumps over the lazy dog.
: 1 contrast ratio

How to check color contrast

Pick a text color and a background color above — with the swatch, the hex box, or by pasting an rgb(), hsl() or oklch() value. The contrast ratio and every WCAG pass/fail badge update instantly, and each color is shown in HEX, RGB, HSL and OKLCH so you can copy whichever format your stylesheet uses.

WCAG contrast levels, briefly

The ratio uses the official WCAG formula on the relative luminance of each color, so the numbers match what an accessibility audit will report.

Why OKLCH?

HSL is easy but deceptive: two colors with the same "lightness" can look wildly different in brightness. OKLCH is perceptually uniform — its lightness, chroma and hue map to how we actually see — so nudging one value gives a predictable visual change. It's ideal for building accessible palettes and is supported in every current browser.

Is it really private?

Yes. There is no upload and no account. The math runs entirely in your browser and the tool works offline once the page has loaded.