Color Contrast Checker
Pick a text color and a background color to get the exact WCAG contrast ratio, with instant AA and AAA pass-fail results for normal and large text.
How color contrast is scored
Contrast ratio is a number between 1:1 (no contrast — identical colors) and 21:1 (maximum — pure black on pure white). The Web Content Accessibility Guidelines (WCAG) set the thresholds every accessible site should meet:
- AA — normal text: 4.5:1 minimum
- AA — large text (18pt / 24px, or 14pt / 18.66px bold): 3:1 minimum
- AAA — normal text: 7:1 minimum
- AAA — large text: 4.5:1 minimum
Meeting AA is the practical baseline referenced by the ADA and most accessibility law. This tool calculates the ratio with the official relative-luminance formula, entirely in your browser.
Frequently Asked Questions
What is a good color contrast ratio?
WCAG requires at least 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold) to pass AA. AAA — the enhanced level — requires 7:1 for normal text and 4.5:1 for large text.
What is the difference between AA and AAA?
AA is the standard legal benchmark referenced by the ADA and most accessibility regulations. AAA is a stricter, enhanced target. Aim for AA at minimum; hit AAA where you can.
Does this send my colors anywhere?
No. The contrast ratio is calculated in your browser using the official WCAG relative-luminance formula. Nothing is uploaded.
Why does contrast matter?
Low contrast text is hard to read for people with low vision, color blindness, or anyone on a bright screen outdoors. Good contrast improves readability, accessibility compliance, and conversion.
Need a site that passes accessibility standards end to end? Let’s build it right.