Colour converter and contrast checker

Three ways to write the same colour

HEX is compact and the usual choice in design handoffs. RGB is the same three channels in decimal, and gains an alpha channel as rgba. HSL describes hue, saturation and lightness, which is far easier to work with when you need a family of related colours: keep the hue, change the lightness, and you have a consistent scale for hover states, borders and backgrounds.

Reading the contrast figures

The contrast ratio compares the relative luminance of two colours. WCAG 2.2 sets the thresholds at 4.5:1 for normal body text, 3:1 for large text (roughly 24px, or 19px bold) and 3:1 for meaningful interface components such as input borders and icons.

This matters more than it first appears. Low contrast is the single most common accessibility failure on the web, it affects anyone reading on a phone in sunlight as much as it affects people with low vision, and it is usually free to fix — a few steps of lightness is often all it takes.

Building a usable palette

• Pick one brand hue and generate a lightness scale from it rather than choosing unrelated colours.
• Reserve saturated colours for actions and state. Backgrounds and surfaces should be near-neutral.
• Never use colour as the only signal — pair it with text, an icon or a shape, so the meaning survives colour blindness and greyscale printing.
• Check both themes. A colour that passes on white frequently fails on a dark surface, and the same palette has to work in both.

Questions

Why does my colour pass on white but fail on dark?

Contrast is a ratio between two luminance values, so changing the background changes the result. Mid-tone colours often fail against both and need a lighter and a darker variant.

Does the checker cover large text?

The figures shown use the 4.5:1 body-text threshold. For large text the requirement is 3:1, so a value between 3 and 4.5 passes for headings but not for paragraphs.

More tools

Browse all free developer tools or read the guides.