Colour Converter & WCAG Contrast Checker

Features

• HEX, RGB, HSL and HSV conversions shown together, each copyable on its own
• 3, 4, 6 and 8-digit hex plus rgba / hsla alpha
• Picker, text fields and preview stay in sync; one click swaps foreground and background
• WCAG contrast ratio with four verdicts: AA 4.5:1, AAA 7:1, large-text AA 3:1 and large-text AAA 4.5:1
• Suggests the most readable text colour for the chosen background, with its ratio
• Says plainly when contrast is computed on the opaque colour because the foreground has alpha

How to use

1. Type a colour value or pick one with the swatch
2. Set the foreground and background separately — the preview sits between them
3. Read the converted values and the four contrast verdicts below
4. Use the copy button on any row to take that single format

FAQ

What is the difference between HSL and HSV?

Both are hue plus two components, but the second component differs: HSL’s L is lightness, where L=100% is always white; HSV’s V is value, where V=100% is the pure hue. Picker panels usually work in HSV because it is easier to aim, while CSS authors tend to use HSL.

What contrast ratio do I need?

WCAG 2 AA requires at least 4.5:1 for body text and 3:1 for large text (roughly 24px, or 18.66px bold and up). AAA raises those to 7:1 and 4.5:1. The ratio comes from the relative luminance of the two colours and is independent of font and size.

Why does this differ slightly from other tools?

Rounding. This tool uses the formula as written in the WCAG specification and displays two decimals. When a ratio sits right at 4.5 or 7, that small difference can flip the verdict — take the more conservative reading in that case.

How is contrast handled for a semi-transparent colour?

It is computed on the opaque value, and the tool says so. What you actually see depends on whatever sits behind the colour, so a strict figure would require compositing against the background first — treat the number as a guide.