Colour Converter & Contrast Checker
Type or pick any colour to get it in every format, then check text and background colours against WCAG 2.2. If a pair fails, we'll find the nearest colour that passes. You also get tints, shades, matching colours and a preview of how people with colour blindness see them.
- HEX, RGB, HSL, OKLCH, CMYK
- WCAG 2.2 contrast
- Colour-blind previews
Your colour
We couldn't read that colour. Try #ff5733, rgb(255 87 51), hsl(11 100% 60%) or tomato.
Every format
Contrast checker (WCAG 2.2)
Check that text and buttons are readable for people with low vision, and on bright or dim screens.
Large text, 24px
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
Small print at 13px, like captions and footnotes.
Outline buttonTints and shades
Lighter and darker versions of your colour. Click any swatch to copy its HEX code.
Colours that go with it
Classic colour wheel combinations, made by turning the hue and keeping saturation and lightness.
How people with colour blindness see it
Your colour, some matching colours and your text pair, as seen with each type of colour blindness. If two colours look the same here, don't rely on colour alone to tell them apart: add text, icons or patterns.
WCAG 2.2 contrast levels
| What | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text: 18pt (24px) or bigger, or 14pt (about 18.7px) bold | 3:1 | 4.5:1 |
| UI components and graphics: input borders, focus rings, icons, chart lines | 3:1 | No extra level |
| Logos, disabled controls and decoration | No requirement | |
Ratios run from 1:1 (no contrast) to 21:1 (black on white). They aren't rounded: 4.49:1 fails AA. AA is what most laws and contracts ask for, including the UK public sector accessibility regulations.
Which colour format should I use?
- HEX and RGB work everywhere: every browser, email, Office and design app.
- HSL is easier to adjust by hand: change the last number to make a colour lighter or darker.
- OKLCH is the modern choice for CSS. Its lightness matches what your eye sees, so a set of colours with the same lightness really looks even, and it can describe the brighter colours of wide-gamut (P3) screens. All current browsers support it.
- CMYK is for print. Our figures are a simple maths conversion. Real print colours depend on the printer, ink and paper, so ask your printer for their colour profile or use a Pantone guide for brand colours.
Good to know
- About 1 in 12 men and 1 in 200 women have some colour vision deficiency, most often red-green. The previews show the strongest form; many people have a milder version.
- The simulations use the Machado, Oliveira and Fernandes (2009) model, a widely used research model. They're a guide, not exactly what every person sees.
- Contrast is worked out with the WCAG 2.2 formula from each colour's relative luminance. Transparent colours are blended with the background first.
- Everything happens in your browser. Nothing you type is sent anywhere.