Exact ratio
Calculate the WCAG contrast ratio for any hexadecimal color pair.
Free Color Contrast Checker.
Compare text and background colors to get an instant WCAG contrast ratio.
Check normal and large text against AA and AAA thresholds.
Try alternative shades before updating a design system or interface.
Why it matters
Readable color choices include more visitors.
Low contrast makes navigation, forms and important content difficult to read, especially for people with low vision, color-vision differences or screens used in challenging conditions.
A color contrast checker turns visual judgment into a measurable WCAG ratio. Teams can compare a proposed palette against AA and AAA thresholds before colors spread through templates, campaigns and reusable components.
Checking combinations early reduces accessibility rework and helps designers, marketers and developers discuss the same objective evidence. The result does not replace broader accessibility testing, but it provides a fast and dependable first check.
AA checks
Test normal and large text against common AA requirements.
AAA checks
See whether stronger AAA readability thresholds are also met.
Live preview
Preview text and background colors together before using them.
How to use
Check color contrast in three steps.
Use the color contrast checker with the exact colors from your design.
Enter the text color
Paste the three- or six-digit hexadecimal value used for text, icons or another foreground element in your interface.
Enter the background
Add the exact background color behind that element, including the final solid color produced by your design.
Review every level
Check the ratio and AA or AAA results for normal and large text, then adjust either color if needed.
FAQs
Color Contrast Checker FAQ
Understand WCAG ratios, text sizes and accessible color decisions.
Related free tools for Color Contrast Checker
Explore more free tools to measure, improve and understand your website and marketing performance.