Skip to the tools
All kits

Colour converter

Type a colour in any of the three notations and get the other two, with a swatch that updates as you go.

Below that, check whether one colour is readable on another against the WCAG thresholds, which is the part that decides whether text passes an accessibility audit.

Convert a colour

Hex, rgb() or hsl(). The three forms below update as you type.

HEX#1d81f2
RGBrgb(29, 129, 242)
HSLhsl(212, 89%, 53%)

Check contrast

Whether text of one colour is readable on the other, against the WCAG thresholds.

Sample text at this pairing

3.84:1

Normal text, AAFail
Normal text, AAAFail
Large text, AAPass
Large text, AAAFail

Large text is 18pt, or 14pt bold, and over. AA is the usual target; AAA is stricter.

Questions

Is what I paste sent anywhere?
No. Every tool in this kit runs in the page itself. There is no server here that receives what you paste, and you can check it in your browser's network tab: using a tool produces no request carrying your input at all.
Which formats does it read?
Hex, with or without the hash and in three or six digits; rgb() and rgba(); and hsl() and hsla(). Any alpha is ignored, because a contrast check is about the colours themselves.
What do AA and AAA mean?
They are the two WCAG contrast levels. AA is the usual legal and practical target: 4.5 to 1 for normal text, 3 to 1 for large. AAA is stricter, at 7 to 1 and 4.5 to 1. The tool shows all four cells so you can see exactly which your pairing passes.
What counts as large text?
18 point and over, or 14 point and over if it is bold. Large text is held to a lower contrast ratio because it is easier to read at the same contrast.
Why does my HSL come back slightly different?
Hex and RGB store whole numbers per channel, and HSL is a different shape of the same space, so a round trip rounds to the nearest whole value. It stays within a point or two, which is not visible.

The other tools here