What is color contrast ratio and how to test it?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
Your dark gray text on a light gray background might look fine on your screen. But for someone with low vision or color blindness, it's invisible.
That's where color contrast ratio comes in. It measures the luminance difference between your text and background. Higher ratios are easier to read. WCAG sets minimums: 4.5 to 1 for body text and 3 to 1 for large text (18pt or 14pt bold). These ratios work for readers with low vision and people who are color blind.
Testing is straightforward. Pop your foreground and background hex codes into a contrast checker. WebAIM Contrast Checker is the free gold standard. It tells you instantly if you've hit WCAG AA or AAA levels. Chrome DevTools is another option (right-click, inspect, and look for contrast info in the Styles panel).
Once you're comfortable with the basics, dive into WCAG standards and design best practices. Our Accessibility Checker runs both tests automatically.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
