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.
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.
