Color contrast checker
Check the WCAG contrast ratio between two colors and see whether they pass AA and AAA, free and in your browser with no upload. Type hex codes or pick colors from an image, and nudge a failing color until it passes.
The WCAG contrast ratio, and what it passes. Pick from an image or type the hex.
In detail
This contrast checker gives the WCAG contrast ratio between two colors, from 1 to 21, and shows which requirements the pair passes for normal text, large text and UI components. The arithmetic is WCAG's own: each color channel is taken out of the sRGB gamma curve before it is weighted, which is why averaging the raw values disagrees with every published figure.
It needs no file, since two hex codes are the whole input, but you can drop an image and click it to take either color from a real pixel. A nudge control walks the text color toward black or white until it reaches the ratio you asked for, and says so when no color can.
Color contrast checker at a glance
- Input
- Two hex colors, or colors picked from an image
- Output
- The contrast ratio, with pass or fail for WCAG AA and AAA
- What it does
- The WCAG 2 contrast ratio
- AA and AAA for normal and large text
- A UI component check
- Pick colors from an image
- Nudge a color until it passes
- Who it is for
- Designers, developers and accessibility reviewers.
- Limits
- Colors must be opaque; flatten a semi-transparent color first.
- Privacy
- Runs entirely in your browser: an image you pick colors from is never uploaded.
How to check color contrast
- 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.
- 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.
- 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.
- 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 color that reaches the target.
- Sample a color from an image Optionally drop an image, choose which swatch a click fills, then click the picture to take the color under the pointer. Tab to the canvas and the arrow keys move the pick; enter takes it.
Color contrast checker: common 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 color?
Not directly. A contrast ratio only means something between two opaque colors, 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 color?
No, and it tells you when it cannot. Against a mid gray 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 color it found and reports the ratio it actually reached, rather than handing you a false pass.