Contrast Ratio Checker (WCAG)
Check if your text and background colors meet WCAG AA and AAA standards.
100% in your browser — nothing uploadedCheck WCAG color contrast ratio for accessibility compliance
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
min 4.5:1
min 3:1
min 7:1
min 4.5:1
How WCAG contrast ratios work and why they matter
The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios between text and its background so that people with low vision or color deficiencies can read content. A contrast ratio of 1:1 means no difference (same color), and 21:1 is the maximum (black on white). Most body text needs at least 4.5:1 to pass WCAG AA, the standard required by most accessibility laws.
This tool calculates the exact contrast ratio between any two colors and checks it against all four WCAG thresholds: AA for normal text (4.5:1), AA for large text (3:1), AAA for normal text (7:1), and AAA for large text (4.5:1). Large text is defined as 18pt (24px) or 14pt bold (18.5px bold). The preview shows your chosen colors on actual text so you can see the result visually, not just as a number.
The math behind the contrast ratio uses relative luminance — a measure of how bright a color appears to the human eye, weighted by how our eyes perceive red, green, and blue differently. Blue contributes only 7.2% to perceived brightness, while green contributes 71.5%. That is why dark blue text on a black background fails badly even though the hex values look "different enough." The formula applies a gamma correction (the 2.4 exponent) to convert sRGB values to linear light before weighting.
All calculations run in your browser. No colors or design data are sent anywhere. Designers, developers, and content creators use contrast checkers during the design process to ensure their color choices are accessible before shipping. Getting it right at the design stage avoids expensive retrofitting after an accessibility audit or legal complaint.
WCAG contrast thresholds — the complete reference
| Level | Text size | Minimum ratio | Use case |
|---|---|---|---|
| AA | Normal (< 18pt) | 4.5 : 1 | Body text, form labels, buttons — the baseline for most sites |
| AA | Large (≥ 18pt or ≥ 14pt bold) | 3 : 1 | Headings, large UI elements |
| AAA | Normal (< 18pt) | 7 : 1 | Enhanced — recommended for long-form reading |
| AAA | Large (≥ 18pt or ≥ 14pt bold) | 4.5 : 1 | Enhanced — recommended for important headings |
WCAG AA is the standard required by the Americans with Disabilities Act (ADA), Section 508, the European Accessibility Act, and most other accessibility laws. WCAG AAA is a recommendation, not a requirement — achieving it everywhere is often impractical, but it is worth targeting for body text on content-heavy pages.
FAQ
What contrast ratio do I need?
For WCAG AA compliance (the most common legal requirement): 4.5:1 for normal text and 3:1 for large text (18pt / 14pt bold). For WCAG AAA (enhanced): 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?
Text that is at least 18pt (24px) or at least 14pt bold (approximately 18.5px bold). Large text has a lower contrast requirement because its size makes it inherently more readable.
Is my design data private?
Yes. The contrast calculation runs entirely in your browser. No colors are sent to any server.