The checker uses the official WCAG relative-luminance formula, so its numbers match the WebAIM checker and most accessibility audits. Everything runs in your browser - your colors are never uploaded, and there are no limits.
Color Contrast Checker
Runs entirely in your browser - no upload, no sign-up.
Contrast ratio
Passneeds 4.5:1
Passneeds 3:1
Failneeds 7:1
Passneeds 4.5:1
Large = 18pt (24px), or 14pt (18.66px) bold.
What is a color contrast checker?
A color contrast checker measures the contrast ratio between a text color and its background and tells you whether it meets WCAG accessibility standards. It returns a ratio from 1:1 to 21:1, then shows pass or fail for AA and AAA at both normal and large text sizes.
How to use
- 1Enter your colors. Type a hex code, rgb() value or CSS color name for the text and background, or pick them with the color swatches.
- 2Read the ratio. The contrast ratio updates live, with a preview of your text on its background.
- 3Check the badges. Each badge shows pass or fail for WCAG AA and AAA at normal and large text sizes.
Who it's for
- Designers testing brand colors before they reach development.
- Front-end developers checking button, link and label colors against WCAG AA.
- Accessibility auditors documenting contrast failures with exact ratios.
- Content and email teams confirming text stays readable on colored backgrounds.
FAQ
Is the color contrast checker free?
Yes - it's 100% free with no sign-up and no limits. It runs entirely in your browser.
What contrast ratio do I need for WCAG AA?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is at least 18pt (about 24px) at a regular weight, or 14pt (about 18.66px) when bold. Large text is allowed a lower contrast ratio because bigger glyphs are easier to read.
How is the contrast ratio calculated?
It's (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Luminance is computed from the sRGB red, green and blue channels per the WCAG 2.x definition.
Does it support hex, RGB and color names?
Yes. You can enter 3-, 4-, 6- or 8-digit hex, rgb() and rgba() values, or any CSS color name such as 'teal'. You can also pick colors with the native color swatch.
Why does the same ratio sometimes pass and sometimes fail?
The required ratio depends on text size and the level you target. A 3.5:1 ratio fails AA for normal text but passes AA for large text, so always check against the size and level you actually use.