Check WCAG contrast ratio between text and background colors
AA requires 4.5:1 (normal) or 3:1 (large, 18.66px+/24px bold). AAA requires 7:1 (normal) or 4.5:1 (large).
A tool that calculates the actual WCAG contrast ratio between a text color and a background color, and shows instantly whether that pairing passes the accessibility standards designers and developers are usually required to meet.
Pick or type a text color.
Pick or type a background color.
Read the ratio and pass/fail badges instantly.
The ratio ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, the maximum possible). Higher means easier to read; WCAG sets minimum ratios that count as acceptable for each level and text size.
AA is the standard level most accessibility requirements and legal standards target: 4.5:1 for normal text, 3:1 for large text. AAA is stricter and optional for most sites: 7:1 for normal text, 4.5:1 for large text. Passing AAA automatically passes AA, since its thresholds are higher.
Text at least 18pt (24px) at regular weight, or at least 14pt (18.66px) at bold weight, counts as large under WCAG and gets the lower contrast requirement — bigger, bolder strokes are inherently easier to read at lower contrast than small body text.
Each color's relative luminance is calculated from its sRGB values using the WCAG formula, then the ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05) — the same calculation WebAIM's contrast checker and every other WCAG-compliant tool uses, so results match across tools.
No, not with this tool. Colors are entered manually by hex code or color picker; there's no image upload to sample colors from a screenshot or design mockup automatically.
Sufficient contrast keeps text readable for people who can't rely on subtle color differences.
Higher contrast holds up better on a phone screen in direct sunlight, for everyone.
Many accessibility standards and regulations require meeting WCAG AA at minimum.
No. Colors are entered manually, either by hex code or a color picker, not extracted automatically from an uploaded image or screenshot.
AA is the standard, widely required level: 4.5:1 for normal text, 3:1 for large text. AAA is the stricter, enhanced level: 7:1 for normal text, 4.5:1 for large text. Most accessibility requirements and legal standards target AA; AAA is a higher bar not every site aims for.
Text at least 18pt (24px) at regular weight, or at least 14pt (18.66px) at bold weight. Large text gets a lower contrast requirement than normal body text because bigger, bolder strokes are inherently easier to read at lower contrast.
Yes. Both use the same WCAG 2.x relative luminance formula defined in the spec, so the same two colors should produce the same ratio and the same pass/fail result in either tool.
No. It only compares two colors you enter directly. It doesn't analyze a photo, design mockup, or screenshot to find or check colors within it.
No. The contrast calculation happens entirely in your browser using JavaScript.