ToolMin
Professional Developer Tools Collection
WCAG Color Contrast Checker
Check color contrast compliance with WCAG 2.1 guidelines
1. Choose Colors
2. Preview
Sample Text
3. Check Results
Contrast Ratio:
21:1 Higher ratio means better readability| WCAG Standard | Status | Minimum |
|---|---|---|
| Normal Text (AA) | 4.5:1 | |
| Large Text (AA) | 3:1 | |
| Normal Text (AAA) | 7:1 | |
| Large Text (AAA) | 4.5:1 |
Guide:
- Normal Text: Size below 18pt
- Large Text: Size 18pt or larger
- Level AA: Minimum recommended standard
- Level AAA: Enhanced accessibility standard
Recommended Color Combinations
About WCAG Compliance Tool
This tool helps you check if your text and background color combinations meet WCAG accessibility standards. Good color contrast ensures your content is readable by all users, including those with visual impairments.
Real-time Checking
Instantly see if your colors meet WCAG standards
Live Preview
See how your text will look with chosen colors
Suggested Combinations
Pre-tested color combinations that meet standards
WCAG color contrast refers to the difference in brightness between text and its background. The WCAG 2.1 guidelines specify minimum contrast ratios to ensure text is readable by people with visual impairments.
- Level AA is the minimum recommended standard for most websites. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Level AAA is the highest level of accessibility. It requires a higher contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Large text is defined as:
- 18 points (24px) or larger
- 14 points (18.5px) or larger if bold
- Choose your text color using the color picker or enter a hex code
- Choose your background color the same way
- Check the contrast ratio and compliance indicators
- Use the "Swap Colors" button to switch text and background colors
- Try our recommended combinations if you need inspiration