Normal text
The quick brown fox jumps over the lazy dog.
Pass AAADVERT
Color Contrast Checker
Check color contrast ratios for accessibility. Ensure text and background combinations meet WCAG AA/AAA standards.
How to use this tool
- Set foreground and background colors with either pickers or hex inputs.
- Review the computed contrast ratio and AA/AAA pass states for text sizes.
- Copy or download contrast reports in JSON or CSV for audit documentation.
Accessibility benchmarks
- AA requires 4.5:1 for normal text and 3:1 for large text.
- AAA requires 7:1 for normal text and provides stricter readability targets.
- Evaluate all states, including hover and focus, not only default colors.
Practical usage
- Audit design tokens and brand palettes against WCAG expectations.
- Validate component-level text/background pairings before release.
- Include exported ratios in QA notes and accessibility issue tickets.
FAQ
- Does swapping colors change the ratio?
- No. Contrast ratio is symmetric, but swapping helps test visual context quickly.
- Can I export results?
- Yes. This tool provides both JSON and CSV export options.
- Is this suitable for WCAG audits?
- It is useful for fast checks; combine it with full interface and state-level testing for complete audits.
ADVERT
ADVERT