Color Contrast Checker
Test WCAG 2.1 contrast ratios for accessibility.
Large Text (24px bold)
Normal text at 16px · The quick brown fox jumps over the lazy dog.
-
Contrast Ratio
AA Normal
≥ 4.5:1
-
AA Large
≥ 3:1
-
AAA Normal
≥ 7:1
-
AAA Large
≥ 4.5:1
-
How to Use
- Pick a foreground (text) color and a background color.
- The contrast ratio updates instantly.
- Check the WCAG grades (AA/AAA) for normal and large text.
- Click Swap to reverse the colors.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) are international standards for making web content accessible. Level AA is the most commonly required standard. Level AAA is the highest.
What counts as "large text"?
Large text is defined as at least 18pt (24px) or 14pt (18.66px) bold. Large text has a lower contrast requirement because it's easier to read.
What contrast ratio should I aim for?
For body text, aim for at least 4.5:1 (AA). For the best accessibility, target 7:1 (AAA). Headings and large text need at least 3:1.