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.
Text color
Background color
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
- AA — normal text: at least 4.5:1. The baseline most sites should meet.
- AA — large text: at least 3:1 (18pt+, or 14pt+ bold).
- AAA — normal text: at least 7:1. The enhanced level.
- AAA — large text: at least 4.5:1.
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.