Color Contrast Checker

The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios to ensure text is readable by people with visual impairments. Color contrast is one of the most common accessibility failures on the web — according to the WebAIM Million study, low contrast text is found on over 80% of home pages.

Contrast ratio measures the relative luminance difference between foreground and background colors. A ratio of 1:1 means no difference at all, while 21:1 is the maximum (pure black on pure white). WCAG 2.1 sets minimum thresholds at Level AA (4.5:1 for body text, 3:1 for large text) and the stricter Level AAA (7:1 and 4.5:1 respectively).

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more experience low vision due to age, lighting conditions, or screen quality. Sufficient contrast ensures your content is usable by the widest possible audience.

Beyond vision impairments, contrast matters in everyday scenarios: reading a phone screen in bright sunlight, viewing a projector in a lit room, or using a low-quality monitor. Good contrast is not just an accessibility checkbox — it directly improves readability and user experience for everyone.

Designing for accessibility starts with color selection. Many popular brand colors fail contrast requirements when used as text on white backgrounds. A common approach is to define a base palette and then derive accessible text variants by darkening or lightening until the target ratio is reached.

Tools like this contrast checker help you validate combinations before shipping. Consider building contrast checking into your design system: define foreground/background token pairs and verify each pair meets AA or AAA at design time rather than catching issues in an audit.

Manual checking with a contrast tool is a good starting point, but automated testing catches regressions. Browser DevTools (Chrome, Firefox, Safari) include built-in contrast indicators in their color pickers. Automated auditing tools like axe-core, Lighthouse, and Pa11y can flag contrast failures in CI/CD pipelines.

For design tools, Figma and Sketch have accessibility plugins that overlay contrast ratios on frames. Combine automated checks with manual review — automated tools can miss contrast issues in dynamic content, gradients, or images with text overlays.