Free Color Contrast Checker (WCAG AA & AAA)
Enter a text and background color to get the contrast ratio and WCAG AA / AAA results — plus the closest colors that pass. Free, no sign-up, in your browser.
Need the exact colors of a photo first? Use the color picker from image or pull a full color palette from an image.
Hold Frame's color contrast checker tests whether text is readable on its background under WCAG 2.2: enter two colors as HEX or rgb(), use the color pickers, or click a screenshot to pick both. It shows the contrast ratio (1:1 to 21:1) and pass or fail for AA (4.5:1 normal text, 3:1 large text and UI components) and AAA (7:1 and 4.5:1). When a pair fails, it suggests the closest text or background color with the same hue that passes, so you keep your brand color. It is free, needs no sign-up and runs in your browser; share a pair with a link.
Facts checked October 10, 2026.
What it checks
| Price | Free. No sign-up, no limit. |
|---|---|
| Formula | WCAG 2.x contrast ratio (L1 + 0.05) / (L2 + 0.05) from sRGB relative luminance, from 1:1 to 21:1. |
| Thresholds | AA: 4.5:1 normal text, 3:1 large text (24px, or 18.66px bold) and UI components / graphics. AAA: 7:1 normal text, 4.5:1 large text. |
| Fix suggestions | Closest passing text and background colors that keep the same hue, so your brand color stays recognizable. |
| Privacy | Everything runs in your browser; images you pick from are never uploaded. |
| Not the right tool for | Full-page audits (use axe or Lighthouse), text on gradients or photos (check the lightest and darkest spot behind the text), or the draft APCA method from WCAG 3. |
How it works
1. Enter two colors
Type HEX or rgb(), use the color pickers, or click a screenshot to pick the text and background colors.
2. Read the result
The ratio and AA / AAA pass or fail for normal text, large text and UI components update instantly.
3. Fix it
Click a suggested color to apply it — the closest shade with the same hue that passes.
FAQ
What contrast ratio does WCAG require?
Level AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components and graphics. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
Each color's relative luminance L is computed from its sRGB values; the ratio is (lighter L + 0.05) / (darker L + 0.05). Results run from 1:1 (same color) to 21:1 (black on white). Pass or fail uses the unrounded ratio.
My color fails. How do I fix it without changing my brand color?
Use a suggested color: the checker keeps the hue and saturation and moves only lightness, as little as needed to reach AA or AAA. Click a suggestion to apply it.
Can I check colors from a screenshot or design?
Yes. Drop or paste a screenshot, then click the text color and then the background color. The image stays on your device.
Does it check text on gradients or photos?
Check the worst case: pick the lightest spot behind dark text (or the darkest behind light text). If that passes, the whole area does.
Is this the same as the WebAIM contrast checker?
It uses the same WCAG 2.x formula and thresholds, adds fix suggestions and picking colors from an image, and runs entirely in your browser. It is not affiliated with WebAIM.
Does it support APCA / WCAG 3?
Not yet. APCA is still a draft; WCAG 2.2 ratios are what accessibility laws and audits use today.