How to Check Color Contrast for Accessibility
Color contrast is a core accessibility requirement. Text that doesn't have enough contrast against its background is hard to read for users with low vision or color blindness. This guide explains how WCAG contrast ratios work and how to test your color pairs.
What Is Contrast Ratio?
Contrast ratio measures the relative luminance between two colors on a scale from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). WCAG defines minimum ratios for different use cases to ensure readability for users with varying degrees of visual impairment.
WCAG AA vs AAA Standards
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most organizations target AA as the baseline; AAA provides enhanced accessibility.
How to Test Contrast
Use our free Contrast Checker tool: enter your foreground and background colors, and it instantly calculates the ratio and shows AA/AAA pass or fail results. You can also use browser DevTools—Chrome's Inspect panel shows contrast ratios when you select a text element.
Tips for Better Contrast
Avoid light gray text on white backgrounds. Pure black (#000) on white (#FFF) has maximum contrast but can cause eye strain—consider #222 instead. When using colored backgrounds, test contrast with both your body text and heading colors. Always verify contrast in both light and dark mode.
Use These Tools
Frequently Asked Questions
- What is the minimum contrast ratio for WCAG AA?
- 4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular).
- Does contrast ratio apply to images?
- WCAG contrast requirements apply to text and interactive UI elements, not to photographic images.