Color Contrast Checker (WCAG)
Ensure your color combinations meet WCAG 2.1 accessibility guidelines for better web accessibility.
Color Selection
WCAG Compliance Results
21.00:1
AAA
Excellent contrast for all text sizes
Text Preview
Text Samples
The quick brown fox jumps over the lazy dog
Extra Small (12px)
The quick brown fox jumps over the lazy dog
Small (14px)
The quick brown fox jumps over the lazy dog
Normal (16px)
The quick brown fox jumps over the lazy dog
Large (18px)
The quick brown fox jumps over the lazy dog
Extra Large (20px)
The quick brown fox jumps over the lazy dog
Heading (24px)
Headings
Heading 1
36px Bold
Heading 2
30px Semibold
Heading 3
24px Medium
Interactive Elements
Form Elements
Table Example
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
Alert Messages
This is an important alert message
This is a filled alert message
WCAG 2.1 Guidelines
Level AAA
7:1 or higher
Enhanced accessibility
Level AA
4.5:1 or higher
Standard requirement
Level AA Large
3:1 or higher
For 18pt+ or 14pt+ bold
Fail
Below 3:1
Does not meet requirements