🔢 Color Contrast Checker
Check whether your text and background pass WCAG accessibility (AA and AAA) — with a live contrast ratio and a real preview. Runs 100% in your browser, free.
🔒 Private · Free · WCAG AA/AAAHow to use 🔢 Color Contrast Checker
- 1. Choose your Text color with the color picker or type a color in the box beside it — #333, #1F2937, rgb(31, 41, 55), hsl(215, 28%, 17%) or a name like navy.
- 2. Set the Background color the same way. The contrast ratio updates instantly, and the preview shows normal text, large text, a button outline and an icon in your colors.
- 3. Read the five results: AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1) and Non-text UI and graphics (3:1), each marked Pass or Fail.
- 4. If a check fails, pick the level under Nearest passing colors and click Use it on the suggested text or background color. Use Swap to test the reversed color pair.
Frequently asked questions
Is the color contrast checker free to use?
Yes, it’s completely free with no sign-up and no limits. Check as many text and background color pairs as you like. It’s handy for designers, developers and content editors who need to meet WCAG accessibility guidelines.
Does the contrast checker send my colors anywhere?
No. The contrast ratio is calculated in your browser using the WCAG relative luminance formula. Nothing you enter is sent to our server, so you can check brand or client colors privately.
What contrast ratio do I need to pass WCAG AA?
WCAG 2.2 Level AA requires at least 4.5:1 for normal body text, 3:1 for large text, and 3:1 for non-text elements such as icons, input borders and focus indicators. Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. The checker shows all five results at once, and the ratio is never rounded up, so 4.49:1 correctly fails.
What counts as large text for WCAG contrast?
Large text is at least 18 point (about 24 CSS pixels) regular weight, or at least 14 point (about 18.66 pixels) bold. Large text only needs 3:1 for AA. Most body text, captions and buttons count as normal text and need 4.5:1.
How do I fix text colors that fail the contrast check?
Increase the difference in lightness between text and background. The checker suggests the nearest passing text color and background color for the level you pick — same hue and saturation, lightness changed as little as possible — and Use it applies one instantly. Changing only the hue rarely helps, because contrast depends on brightness; gray text on white needs about #767676 or darker to pass AA.
What color formats can I enter in the contrast checker?
Type HEX codes with 3 or 6 digits such as #333 or #1F2937 (the # is optional), rgb() or rgba(), hsl() or hsla(), or a CSS color name like navy, or use the visual color pickers. Semi-transparent colors are blended over the background (and the background over white) before the ratio is calculated.