Color Contrast Checker
Use this free color contrast accessibility checker to validate text and background pairs for WCAG AA and AAA. As a text contrast checker and website accessibility color checker in one, it shows your ratio and pass/fail instantly. Build palettes first with our palette generator, then test pairs here.
Also try our Color Mixing Simulator for paint-style RYB color blends.
Use the tool below to compare foreground and background colors. Add colors and see contrast ratios for all pairs.
Text Size (Applies to all checks)
Color Group #1 (2 colors)
#000000#FFFFFFContrast Matrix - All Color Combinations
| Color 1 | Color 2 | |
|---|---|---|
| Color 1 | 21.00:1 AAAAA | |
| Color 2 |
Detailed Contrast Results
Preview Text
WCAG Color Contrast Checker — AA & AAA Compliance
WCAG contrast ratios measure how readable text is against its background by comparing lightness difference between two colors on a scale from 1:1 to 21:1. Whether you need an accessibility color checker for audits or a daily ADA contrast checker for shipping UI, these ratios matter because low contrast makes content harder to read for users with low vision, color-vision differences, or poor lighting conditions, while compliant contrast improves usability and helps your UI meet accessibility requirements.
How This Text Contrast Checker Works
Our color contrast accessibility checker compares foreground and background hex values using the same relative luminance formula WCAG references, so designers and developers get consistent results without spreadsheets.
- Enter foreground color.
- Enter background color.
- View contrast ratio.
- Check AA/AAA pass/fail.
Understanding WCAG contrast ratios
| Text Type | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
Frequently asked questions
What is WCAG contrast ratio?
WCAG contrast ratio is the numeric comparison between a foreground color and background color that indicates readability, where higher ratios mean stronger visual separation.
What contrast ratio do I need for text accessibility?
Normal text needs at least 4.5:1 for AA and 7:1 for AAA. Large text needs at least 3:1 for AA and 4.5:1 for AAA.
Does contrast matter for buttons and icons?
Yes. Button labels, iconography that conveys meaning, and other UI elements should maintain sufficient contrast so users can identify and use controls reliably.
How do I fix low contrast in my design?
Increase the difference between foreground and background by darkening text, lightening the background, or selecting a stronger accessible color pair, then re-test until AA or AAA passes.
Who Uses a Color Contrast Checker?
- Web designers checking text readability
- Developers building ADA compliant websites
- UX teams running accessibility audits
- Agencies testing client sites for WCAG compliance
What is ADA Color Contrast Compliance?
ADA (Americans with Disabilities Act) requires websites to meet WCAG 2.1 AA contrast standards. Normal text needs a 4.5:1 ratio, large text needs 3:1. Our checker tests both instantly.
Also try our Color Mixing Simulator to see what colors produce when mixed together.
Ad Space (728x90)