Color Contrast Checker: WCAG AA and AAA, With Fixes
Check a pair against WCAG 2.2, and get the nearest shade that passes.
Runs entirely in your browser. Nothing is uploaded, no account needed.
What this does
Most contrast checkers tell you that 3.1:1 fails and stop there, which leaves you nudging a hex value one digit at a time. This one tells you the ratio, which of the five WCAG thresholds you clear, and the closest color to the one you picked that would actually pass.
How to use it
Enter two colors
Hex, rgb() or an HTML color name. The swatches are editable both by typing and with the native color picker.
Read all five verdicts
Normal text AA (4.5:1) and AAA (7:1), large text AA (3:1) and AAA (4.5:1), and non-text UI components such as input borders and icons (3:1). A pair that fails body copy is often perfectly valid for a 24px heading.
Take the suggested fix
If the pair fails, the tool walks the foreground's lightness in both directions and returns the nearest shade that reaches your target, keeping the hue and saturation. You get a color that still looks like your brand.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for body text and 3:1 for text at 24px, or 18.66px if bold. That is WCAG 2.2 level AA, which is what accessibility legislation in most jurisdictions references. AAA asks for 7:1 and 4.5:1 respectively. Interactive component boundaries and meaningful icons need 3:1 against what is behind them, which is the criterion most design systems miss.
Does a large ratio guarantee readable text?
No. Contrast ratio is a formula over relative luminance and knows nothing about font weight, size, or the fact that a 200-weight typeface at 12px is unreadable at any ratio. Treat AA as the floor, not the goal.
How is the ratio calculated?
Each channel is converted from sRGB to linear light, weighted 0.2126 red, 0.7152 green, 0.0722 blue to get relative luminance, and the ratio is (lighter + 0.05) / (darker + 0.05). The offsets model viewing-environment flare, which is why pure black on pure white is 21:1 and not infinity.
What about transparency and gradients?
The formula needs two opaque colors. For semi-transparent foregrounds, composite against the actual backdrop first and test the result. For a gradient, test the worst point on it, not the middle.
Built by Inspistor
We make a link library for people whose work spans more than one project: unlimited nesting, one-click Chrome capture, voice notes, and instant search.