COLOR TOOL · CLIENT-SIDE
Contrast Checker
Check the contrast ratio between foreground and background colors. Get instant WCAG 2.2 pass/fail results.
Large text (24px bold)
Normal text sample — The quick brown fox jumps over the lazy dog.
WCAG 2.2 thresholds
- ● Normal text AA: 4.5:1 minimum
- ● Normal text AAA: 7:1 minimum
- ● Large text AA: 3:1 minimum
- ● Large text AAA: 4.5:1 minimum
- ● Large text = 18pt+ or 14pt+ bold
Why contrast matters
Sufficient contrast ensures text is readable for people with visual impairments, including color blindness and low vision. WCAG 2.2 is the international standard for web accessibility compliance.
Frequently Asked Questions
What is a contrast ratio?
A contrast ratio measures the difference in luminance between two colors, ranging from 1:1 (no contrast) to 21:1 (maximum contrast). WCAG 2.2 requires minimum ratios for text readability: 4.5:1 for normal text and 3:1 for large text at AA level.
What is WCAG AA vs AAA?
AA is the minimum standard requiring 4.5:1 contrast for normal text and 3:1 for large text. AAA is the enhanced standard requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility guidelines recommend meeting at least AA.
How do I improve contrast?
Increase the difference between your foreground and background colors. Darken light text or lighten dark text. Use tools like this checker to test adjustments until you reach the desired WCAG level.