Free tool
Colour Converter & Contrast Checker
Convert any colour between HEX, RGB and HSL, and check whether a foreground/background pairing meets WCAG AA or AAA contrast requirements.
Colour Converter & Contrast Checker
Colour Converter
Contrast Checker
-
How to convert a colour
Type a HEX value, such as #6366f1, or use the colour picker, and the RGB and HSL versions appear ready to copy. HEX is what most website and design tools ask for, RGB is common in code and spreadsheets, and HSL is the easiest to adjust by hand because it separates hue, saturation and lightness.
How to check contrast
- Enter a foreground colour for your text.
- Enter a background colour.
- Read the contrast ratio and the pass or fail badges, and look at the sample sentence in the preview.
What the WCAG levels mean
The Web Content Accessibility Guidelines set minimum contrast ratios so text can be read by people with low vision or colour blindness, and by anyone squinting at a phone in bright sunlight.
- AA, normal text: 4.5:1. This is the level most organisations aim for.
- AA, large text: 3:1. Large means roughly 24px regular or 19px bold and above.
- AAA, normal text: 7:1.
- AAA, large text: 4.5:1.
Pale grey on white, and white on a light brand colour, are the pairings that fail most often. If yours fails, darken the text or the background a little and check again. The preview shows your two colours together, so you can judge readability by eye as well as by the numbers.