Check color contrast against WCAG

This contrast checker gives the WCAG contrast ratio between two colors, from 1 to 21, and shows which bars the pair passes for normal text, large text and UI components. The arithmetic is WCAG's own: each sRGB channel is taken out of the gamma curve before it is weighted, which is why averaging the raw bytes disagrees with every published figure. It needs no file — two hex codes are the whole input — but you can drop an image and click it to take either colour from a real pixel, and a nudge control walks the foreground toward black or white until it reaches the ratio you asked for.

How it works

  1. Set the two colors Type a hex into the foreground and background fields — three digits or six, with or without the hash — or use the swatch next to each field. Swap the pair reverses them, and the ratio is symmetric so the number does not change.
  2. Read the ratio and the table The ratio is shown to two decimals. Underneath, three rows say what it passes: normal text needs 4.5 for AA and 7 for AAA, large text needs 3 and 4.5, and a UI component needs 3 for AA.
  3. Check the pair at size The sample block sets the pair at 30px bold, 24px, 18.7px bold, 16px and 13px, plus a bordered control, so you can see the boundary where the large-text rule turns on.
  4. Nudge the foreground if it fails Choose a target of 3, 4.5 or 7 and press Nudge the foreground. It holds the hue and saturation, moves only the lightness toward black or white, and stops at the first colour that reaches the target.
  5. Sample a colour from an image Optionally drop an image, choose which swatch a click fills, then click the picture to take the colour under the pointer. Tab to the canvas and the arrow keys move the pick; enter takes it.

Questions

Why is there no AAA result for UI components?
Because WCAG does not define one. WCAG 2.2 has a single non-text contrast criterion and it sits at level AA, requiring a ratio of 3 to 1 for icons, borders, focus rings and chart lines. The tool shows "No bar" in that cell rather than inventing a rule that does not exist.
What counts as large text?
24px and up at a normal weight, or 18.7px and up when bold. Below that the pair has to clear the normal-text bars: 4.5 to 1 for AA and 7 to 1 for AAA. The sample block sets type at exactly those sizes so you can see which side of the line your text falls on.
Can I check a semi-transparent colour?
Not directly. A contrast ratio only means something between two opaque colours, so anything semi-transparent has to be flattened onto whatever sits behind it before it is measured. The tool takes six-digit hex values and refuses to sample a fully transparent pixel from an image for the same reason.
Does the nudge always find a passing colour?
No, and it tells you when it cannot. Against a mid grey background, white reaches about 4.54 and black about 4.62, so a target of 7 is out of reach in both directions. In that case the tool returns the furthest colour it found and reports the ratio it actually reached, rather than handing you a false pass.

Every tool