Color Converter & Contrast Checker
Convert between hex, RGB and HSL, and check whether two colours are readable together.
Runs entirely in your browser
Loading tool...
How to use
- Type a colour in any format — hex, rgb() or hsl(). Short hex like #abc works.
- Read it back in every format, and copy whichever you need.
- Set a background colour to check the pair for contrast.
- Check the four WCAG results: body text and large text, at AA and AAA.
Features
- Hex, RGB and HSL in both directions, including alpha and short hex.
- WCAG contrast computed properly, by linearising out of sRGB's gamma curve.
- Separate results for body and large text, which have different thresholds.
- A live preview of the pair at both sizes, so the number has something to check against.
- Runs entirely in your browser.
Frequently asked questions
- Why is mid grey not half as bright as white?
- Because sRGB values are gamma-encoded, not linear. #808080 sits halfway along the scale a screen uses, but its relative luminance is 0.216, not 0.5. WCAG's formula linearises each channel first, and contrast checkers that skip that step report numbers that look plausible while passing colour pairs nobody can read.
- What counts as large text?
- 24px, or 18.66px if it is bold. Larger text stays readable at lower contrast, so it has its own thresholds: 3:1 for AA rather than 4.5:1. That is why a pair can pass for a heading and fail for body copy — #777 on white is exactly that case, at 4.48:1.
- What do AA and AAA mean?
- Conformance levels in WCAG 2. AA is the level most legislation and procurement rules reference: 4.5:1 for body text, 3:1 for large. AAA is stricter at 7:1 and 4.5:1, and is rarely required for a whole site. If you have to pick one target, pick AA.
- Why is transparency ignored in the contrast result?
- Because a semi-transparent colour has no fixed luminance — it depends on whatever is behind it. Contrast is only meaningful between two solid colours, so alpha is carried through the formats and left out of the ratio. Compose the colour against its real backdrop first.
Related tools
Two colours, seen four other ways — because the failure is not that a design looks worse, it is that two meanings become one colour.
A full shade scale from one colour, with the text colour that actually passes contrast on each step.
Convert length, weight, temperature, data, area, volume, speed and time.
Convert between binary, octal, decimal, hexadecimal and any base up to 36 — exactly, at any size.