HEX, RGB and HSL, with the WCAG contrast ratio attached.
What it's for
Check whether text in one colour can be read easily on a background of another, and get the same colour written in the other ways a website or a design program asks for.
Before you start
Have the two colours to hand — the text colour and the background — as codes such as #3366cc, rgb() or hsl() values, or a common name such as navy.
Enter the text colour
Type it into Colour. The square beside the box fills with the colour once the page can read it.
Enter the background
Type the background into Against, or press On white or On black for the two commonest. Swap trades the two colours round.
Convert
Press Convert. The ratio at the top also updates as you type, so you can nudge a colour and watch it change.
Read the sample, then the checks
The box below shows real text in your two colours — look at it, because the ratio is a claim about reading. Then read the WCAG 2 list. For ordinary text, the line that matters is AA.
Reading the result
If it goes wrong
Lightness and luminance are different measures, and that is where nearly everyone goes wrong.
HSL lightness is a geometric midpoint. Pure blue #0000ff and pure yellow #ffff00 both sit at 50% lightness. Their relative luminance is 0.07 and 0.93 — a factor of thirteen — because the eye is about ten times more sensitive to green than to blue.
That is why white text on blue passes AA comfortably and white text on yellow fails it badly. HSL calls them identical.
This computes luminance the way WCAG 2 defines it, including the sRGB gamma curve. Skip that step and average the raw 0–255 values instead and you get a figure that is plausible and wrong — and wrong in the direction of passing, which is the dangerous direction for an accessibility check.
Because converting a colour and checking it is readable are the same job, done ten seconds apart. Splitting them means the second half gets skipped. This site holds its own copy to 4.5:1, so shipping the check alongside the conversion is consistent rather than decorative.
Because lightness and luminance are different measures. HSL lightness is a geometric midpoint: pure blue and pure yellow both sit at 50%. Their relative luminance is 0.07 and 0.93 — a factor of thirteen — because the eye weights green about ten times more than blue. That is why white text on blue passes AA comfortably and white text on yellow fails it badly. Contrast must be judged on luminance, and that is what this uses.
WCAG 2 AA needs 4.5:1 for body text and 3:1 for large text — 18pt, or 14pt bold. AAA needs 7:1 and 4.5:1 respectively. Icons, form borders and focus rings need 3:1 under the non-text rule. All five are shown, because the one that matters depends on what the colour is for.
No, and the page says so. WCAG contrast is defined for the composited result — a colour with alpha has no fixed luminance until you know what is behind it, and that may be an image or a gradient. The figure shown treats both colours as opaque, which overstates the contrast. Composite the colour first, then check the result.
Because a hex colour has 3, 4, 6 or 8 digits, and five or seven is almost always a dropped or doubled character. Padding it to fit would hand you a colour you never typed and never notice — far worse than an error that points at the typo.
Because most of them are Victorian upholstery — papayawhip, lightgoldenrodyellow — and nobody types them. The ones here are the ones that turn up in real stylesheets, plus the greys. An unrecognised name is refused by name rather than quietly guessed at.
Important
Runs entirely in your browser; nothing is transmitted. Contrast is computed from WCAG 2 relative luminance, including the sRGB gamma step. A ratio involving a semi-transparent colour is an overstatement and is flagged as one. Nothing you type here is sent to our servers — the calculation runs entirely in your browser.
