Colour Converter & Contrast Checker

Convert between HEX, RGB, HSL and OKLCH, and check contrast against WCAG.

Colour

Pick Any CSS colour

Formats

Contrast

Foreground Background

Large text sample

Body text at a normal size, which is what the 4.5:1 threshold is actually about.

Shades — an OKLCH lightness ramp

Send output to

Four ways to name the same colour

HEX and RGB describe a colour by how much red, green and blue light to emit. They are precise and completely unintuitive to adjust — there is no obvious way to make #ab3d13 "a bit lighter" by editing the digits.

HSL was meant to fix that by separating hue, saturation and lightness. It half succeeds: rotating the hue works, but its lightness is not perceptual. HSL yellow at 50% lightness looks dramatically brighter than HSL blue at 50%, so a palette built by holding lightness constant comes out visually uneven.

Why OKLCH is worth learning

OKLCH is perceptually uniform: equal numeric steps look like equal visual steps, across every hue. Change the lightness by 10% and it looks 10% lighter whether the colour is yellow or navy. That single property is what makes it possible to generate a colour ramp — like the one above — that reads as evenly spaced instead of bunching in the middle.

It also covers colours outside sRGB on displays that can show them. All modern browsers support it, and it degrades predictably. If you are building a design system today, it is the space to define your palette in.

Contrast, and what the numbers mean

The contrast ratio between two colours runs from 1:1 (identical) to 21:1 (black on white). WCAG sets thresholds by use:

4.5:1 — AA for body text. The one that matters most.
3:1 — AA for large text (18pt, or 14pt bold), and for interface components and meaningful graphics.
7:1 — AAA for body text.
4.5:1 — AAA for large text.

Passing is not the same as accessible

The ratio is a useful, checkable floor — not a verdict on your design. The formula is known to be imperfect, and is noticeably generous to light text on dark backgrounds, which is why text that technically passes on a dark theme can still be hard to read. Treat a pass as the beginning of the question rather than the end of it, and never rely on colour alone to convey meaning.

Questions people actually ask

What is OKLCH and why include it?

A perceptually uniform colour space, now supported across browsers. Changing its lightness by a fixed amount produces a change that looks consistent to the eye, which HSL does not — in HSL, yellow at 50% lightness looks far brighter than blue at 50%. That makes OKLCH much better for generating a colour ramp.

What contrast ratio do I need?

WCAG AA asks for 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold). AAA asks for 7:1 and 4.5:1. Interface components and graphics need 3:1. The checker reports the ratio and which thresholds it passes.

Does passing the contrast check mean the design is accessible?

No. Contrast ratio is one measurable requirement among many, and the formula is known to be imperfect — it can be generous to light text on dark backgrounds. Passing is necessary, not sufficient.