Contrast Checker
Check WCAG color contrast for accessibility.
#1a1a1a#fbfbfaLarge sample text
This is what normal body text looks like with these colors.
About Contrast Checker
Check the color contrast ratio between text and its background against WCAG accessibility standards. Sufficient contrast is what makes text readable for everyone, including people with low vision, and the Web Content Accessibility Guidelines set specific ratio thresholds for normal and large text at the AA and AAA levels. Enter a foreground and background color to see the exact ratio and whether it passes each standard. Designers and developers use this to build interfaces that are legible and compliant. The calculation runs instantly in your browser as you adjust colors, nothing is stored, and the tool is free with no signup or installation required.
How to use this tool
- 1Pick your text color and background color.
- 2See the contrast ratio and a live text preview.
- 3Check the WCAG AA and AAA pass/fail badges.
WCAG contrast requirements
The Web Content Accessibility Guidelines define minimum contrast ratios between text and its background. Contrast ratio ranges from 1:1 (identical colors) to 21:1 (black on white).
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | 7:1 |
| Large text (≥ 18pt or 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | - |
| Logos & decorative text | No requirement | No requirement |
Common real-world failures: light gray body text (#999 on white is 2.8:1 - fails AA), and white text on brand colors like orange or light blue. Roughly 8% of men have some form of color vision deficiency, and low-contrast text affects everyone in bright sunlight - meeting AA is a floor, not a nice-to-have.
Frequently asked questions
What ratio do I need to pass WCAG?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
18pt (24px) and larger, or 14pt (18.7px) bold and larger.
Related guide
6 min readColor Contrast and Accessibility: A Practical Guide to WCAG
What contrast ratio actually measures, the WCAG AA and AAA thresholds, the design patterns that fail most often, and how to fix them without ruining your palette.