Then check two colours against WCAG AA and AAA and see the text on screen. Convert a colour between HEX, RGB, HSL, HSV and OKLCH, and test whether text is easy to read on its background. It is free and runs in your browser.
How to convert a colour
- Use Pick to choose a colour, or type or paste a value into Any colour.
- Read the same colour as HEX, RGB, HSL, HSV, OKLCH and its CSS name where there is one.
- Press Copy next to the format you want, or Copy HEX.
How to check contrast
- Choose a Text colour and a Background colour, or use Use the main colour as text or Use it as background.
- Read the contrast ratio and whether it passes AA and AAA for normal text, Large text at 24px, Bold text at 19px and a Button outline.
- If the pair fails, use the suggested nearby colour that passes.
Which format to use
HEX and RGB describe the red, green and blue light in a colour and work everywhere. HSL and HSV describe hue, saturation and lightness or brightness, which makes it easier to nudge a colour by hand. OKLCH is the newest CSS format: its lightness matches how bright colours look to people, so two colours with the same L really do look equally light, which makes it great for palettes and themes. All modern browsers support oklch() in CSS.
How the contrast ratio works
The ratio compares the relative luminance of the two colours, from 1:1 for identical colours to 21:1 for black on white. Results are never rounded up, so 4.49:1 fails AA. If the text colour is see-through, it is blended with the background first. When a pair fails, a nearby colour that passes is suggested for either side.
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 for normal text and 4.5:1 for large text. Meeting these helps people with low vision and anyone reading on a bright screen.
Input this tool understands
Three, four, six and eight digit HEX with or without #, rgb() and rgba() with commas or spaces, hsl() with deg, turn or rad, hsv(), oklch() and oklab(), the 148 CSS colour names and plain numbers like 59, 130, 246. Alpha after a slash or as a fourth value is kept.
Who uses it
Web designers and developers building a theme, small business owners checking that their brand colours are readable, students making slides, and anyone who has a colour in one format and needs another. To find a colour from a photo, use the image colour picker.
Questions
What is a good contrast ratio?
Aim for at least 4.5:1 for normal text. Higher is better, and 7:1 meets AAA.
Why do the same colour values look slightly different on screens?
Screens vary in brightness and colour. The numbers are the same, but the display changes how they look.
Is anything uploaded?
No. The conversion happens in your browser.