Color Contrast Checker
Check the contrast ratio between a foreground and background color, and see whether it meets WCAG AA or AAA accessibility guidelines for normal and large text.
Normal text preview
The quick brown fox jumps over the lazy dog.
Contrast ratio
14.68:1
Everything you enter is processed in your browser and isn't sent to our servers.
How to use color contrast checker
- 1Pick or type a foreground (text) color.
- 2Pick or type a background color.
- 3Read the contrast ratio and which WCAG levels it passes.
About this tool
WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios so text stays readable for people with low vision or color vision deficiencies. Level AA — the commonly targeted standard — requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). The stricter AAA level requires 7:1 and 4.5:1 respectively.
The contrast ratio is calculated from each color's relative luminance using the exact formula defined in the WCAG 2.x specification, not an approximation — the same calculation accessibility auditing tools use.
Frequently asked questions
For most sites, aim for WCAG AA: 4.5:1 for normal body text and 3:1 for large text (roughly 18pt or 14pt bold). AAA (7:1 / 4.5:1) is a stricter, optional target that's harder to hit with many color palettes.