- HEX
#0E7566 - RGB
rgb(14, 117, 102) - HSL
hsl(171, 79%, 26%)
HSL is shown rounded to whole numbers. Pasting that value back can land up to 3/255 away from the original colour (HEX and RGB are exact). For colours near a threshold, the pass/fail above can change.
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%)
HSL is shown rounded to whole numbers. Pasting that value back can land up to 3/255 away from the original colour (HEX and RGB are exact). For colours near a threshold, the pass/fail above can change.
This is how small text looks. Long passages are read at this weight.
Large text at a glance
- Small text AA 4.5:1Passes
- Large text AA 3:1Passes
- UI parts and borders 3:1Passes
- Small text AAA 7:1Fails
Convert between HEX, RGB and HSL. Enter a text colour and a background and you also get the contrast ratio and whether it meets the WCAG thresholds.
Questions
Are the colours sent anywhere?
No. Conversion and the ratio are computed in the browser.
It passes but still reads badly.
That happens. The ratio only looks at luminance — not hue difference or stroke weight. That is why the sample is there; trust your eye for the last step.
Can it handle colours with alpha?
No. A translucent colour depends on whatever is behind it, so no single ratio exists. Enter the resulting composited colour instead.
To reach the threshold, which colour should I move?
Usually the background. Text colour is often fixed by a brand, while a background tolerates a shift in lightness without changing the character of the design. Switch to HSL, move L in steps of 5, and stop once the ratio clears. Hue and saturation stay where they were, so the palette still looks like itself.
Do the same thresholds apply in dark mode?
They do — but a pairing that worked on a light background does not automatically work on a dark one, so check both. Saturated colours chosen against white are the ones that most often fall short once the background goes dark.
Does it account for colour vision differences?
No. This measures luminance difference only, not how distinguishable two hues are. A pairing can clear the ratio and still be unreadable for someone who cannot separate red from green. Not carrying meaning by colour alone — using shape, text or position as well — is a separate requirement from the ratio.