Free Developer Tool
WCAG Contrast Checker
Check text and background color contrast against WCAG accessibility requirements.
Normal text
Large text
Reversed normal text
Reversed large text
Text Color
Background Color
WCAG Contrast
21.00:1AAA
Passes WCAG AAA for normal and large text.
WCAG 2.2 Results
Normal Text — AAPass
Large Text — AAPass
Normal Text — AAAPass
Large Text — AAAPass
Required Ratios
Normal text AA4.5:1
Large text AA3:1
Normal text AAA7:1
Large text AAA4.5:1
What is WCAG Contrast Checker?
Check the contrast between foreground and background colors and determine whether the combination meets WCAG accessibility requirements for readable text.
How to use
- Choose a foreground color.
- Choose a background color.
- Calculate the contrast ratio.
- Check the WCAG compliance results.
Features
- WCAG contrast checking
- Contrast ratio calculation
- AA and AAA results
- Normal and large text checks
- Color preview
- Browser processing
Common Use Cases
- Accessible web design
- UI development
- Design system testing
- WCAG compliance
Example
Input
Foreground: #333333 Background: #FFFFFF
Output
Contrast ratio: 12.63:1 Normal text: AAA Large text: AAA
FAQ
What does the WCAG contrast checker measure?
It calculates the contrast ratio between a foreground color and a background color and compares it with WCAG requirements.
Does it check AA and AAA levels?
Yes. The tool can show whether the selected colors meet WCAG AA and AAA contrast requirements.
Does text size affect WCAG contrast requirements?
Yes. WCAG uses different contrast thresholds for normal text and large text.
Missing a feature?
If this tool doesn't cover your use case or is missing functionality, please let me know through the Contact page.
New improvements and features are added based on user feedback.