Color converter and contrast checker
HEX, rgb(), hsl() or a CSS color name — all four are read.
Shades
The same hue at eleven levels of lightness. Click one to make it the current color.
Contrast
The ratio between two colors, measured the way WCAG defines it.
| Pair | Ratio | AA (4.5:1) | AAA (7:1) |
|---|
What this tool does
Converting a color between notations is five lines of arithmetic. The harder question is whether text in that color can actually be read, and that answer needs a step most tools skip. Both are on this page, using the same color you typed.
How to use it
- 1 Type a color in any notation, or use the picker.
- 2 Copy the notation you need, or click a shade to move to it.
- 3 Read the contrast table. Anything marked Fail will be hard to read for someone.
Why the same hue looks different in HSL
HSL rounds to whole degrees and whole percents, so converting to HSL and back does not always return the exact byte values you started with. For that reason the HEX shown here is always derived from what you entered, never from a round trip through HSL — otherwise the field would drift by one step on every click.
What the contrast numbers mean
The ratio runs from 1:1 for two identical colors to 21:1 for pure black on pure white. The thresholds below are the ones the tool checks against.
| 4.5:1 | Normal body text, WCAG AA |
| 3:1 | Large or bold text, WCAG AA |
| 7:1 | Normal body text, WCAG AAA |
| 21:1 | The highest possible ratio: black on white |
The step most tools skip
Relative luminance is not the average of the channel values. Each channel has to be linearised first, because the numbers in a HEX code are gamma encoded rather than proportional to light. Skip that step and the ratio still comes out as a plausible number, just the wrong one, and the error is largest in the mid tones where most interface colors live.
Contrast is necessary, not sufficient
A pair can pass 4.5:1 and still be a poor choice: colour blindness makes some pairs indistinguishable even at high ratios, and colour alone should never be the only thing carrying meaning. Treat a pass here as clearing the floor, not as a verdict on the design.