🍋 Design Tools
Contrast Checker
chars
words
sentences
lines
Results
Result
About Contrast Checker
Check WCAG 2.1 contrast ratios between foreground and background colors. Validates AA and AAA compliance for both normal and large text.
How It Works
Enter a foreground and background color (hex or rgb). The checker calculates the contrast ratio using WCAG 2.1's relative luminance formula and reports pass/fail for AA and AAA levels at normal and large text sizes.
Frequently Asked Questions
What is WCAG contrast?
WCAG defines minimum contrast ratios for readability. 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?
Large text is 18px (24px in CSS pixels) or 14px bold. Headers are typically large text. Body copy at 16px is normal text.