Accessibility Contrast Checker
Check contrast between text and background colors. Enter your colors below to see the ratio and WCAG AA/AAA pass or fail. 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. 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 to check color contrast
- 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.
Also try our Color Mixing Simulator to see what colors produce when mixed together.
Ad Space (728x90)