Color Converter & Contrast Checker
Convert between HEX, RGB, HSL, and OKLCH. Check WCAG contrast ratios.
100% in your browser — files never leave your device
Color converter
WCAG contrast checker
The quick brown fox jumps over the lazy dog.
Small text — 14px equivalent. Hard to read at low contrast.
How the color conversions and contrast checker work
HEX, RGB, and HSL conversion is straightforward math shared by every color tool. OKLCH is the newer addition: it's a perceptually uniform color space, meaning equal numeric steps in lightness or chroma look like equal steps to the human eye — unlike HSL, where a lightness change can look wildly different depending on hue. The conversion follows Björn Ottosson's published OKLab formulas.
The contrast checker computes the WCAG relative-luminance ratio between your two colors and checks it against four thresholds: AA normal text (4.5:1), AA large text (3:1), AAA normal text (7:1), and AAA large text (4.5:1). Passing AAA is the higher bar most accessibility audits eventually ask for.
The ratio is calculated only between the two flat colors you enter. It can't see gradients, background images, or partial transparency, all of which change effective contrast in a real interface — treat a passing ratio here as a starting point, not a substitute for checking the rendered page.
Frequently asked questions
What are the WCAG contrast thresholds?
WCAG 2.1 defines two levels. AA requires a 4.5:1 ratio for normal text (under 18pt / 14pt bold) and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. The higher the ratio, the better readability for users with low vision.
Is my color data sent anywhere?
No. All color math runs in your browser — conversions, contrast calculations, everything. Nothing is uploaded or logged.
What is OKLCH and why use it?
OKLCH is a perceptually uniform color space. Equal numeric steps in lightness or chroma look equally different to the eye, which makes it ideal for programmatic color manipulation, palette generation, and CSS color-mix().