Colour Converter and Contrast Checker

This tool does two jobs designers and developers switch between all day. It converts a colour between HEX, RGB, HSL and OKLCH — the newer CSS format that describes colour the way the eye sees it — and it checks the contrast between a text colour and a background against WCAG 2.2, the accessibility standard most organisations and many laws refer to. When a pair fails, it offers the nearest colour that passes: the same hue, only lighter or darker, so the fix still looks like your brand.

1. Type or paste the text colour, or click the swatch to pick one. Hex codes, rgb(), hsl(), oklch() and CSS names such as rebeccapurple all work.
2. Enter the background colour the same way.
3. Read the contrast ratio and the five checks under it: AA and AAA for normal and large text, and the 3:1 minimum for icons, borders and focus rings.
4. If the pair fails AA, press “Use it” on the suggested colour to try it.
5. Copy the text colour in whichever format your code needs.

• Contrast is calculated with the WCAG 2.2 formula. The ratio shown is rounded down to two decimals, so a pair at 4.499:1 reads 4.49:1 and fails — it never displays as a pass it is not.
• Large text means at least 24px, or 18.66px when bold (18pt and 14pt). The check cannot see your font; thin or decorative typefaces may need more contrast than the number says.
• A translucent text colour is judged as it looks painted on the background; a translucent background is judged over white.
• OKLCH colours outside the range most screens show (sRGB) are brought in by reducing their chroma, as browsers do, and the tool says so.
• WCAG 3 is expected to use a different method, APCA. It is still a draft, so this tool uses the method that is in force today.
• Everything is worked out in your browser. No colours are sent anywhere or stored.

For normal body text, at least 4.5:1 (AA). For large text and for icons, input borders and focus indicators, at least 3:1. AAA, the stricter level, asks for 7:1 and 4.5:1.

In OKLCH, equal steps of lightness look equally different, and changing the lightness does not drift the hue. That makes it easier to build a palette of shades, and it is why the suggested fix changes only lightness.

Its ratio is 4.47:1, just under 4.5. The line has to be drawn somewhere, and many people read with low vision, glare or a dim screen. #767676, one step darker, passes at 4.54:1.

Not yet. Colours are converted and checked in sRGB, the space WCAG’s formula is defined for.