WCAG Contrast Checker
Check color contrast against WCAG AA/AAA and fix failing pairs.
What is WCAG color contrast?
Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for users with low vision or color blindness. The contrast ratio is calculated from the relative luminance of the foreground and background colors, with a range from 1:1 (same color, no contrast) to 21:1 (black on white, maximum contrast).
WCAG 2.x defines two levels of compliance for text contrast. Level AA (the minimum acceptable standard for most websites) requires a contrast ratio of at least 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA (enhanced accessibility) requires 7:1 for normal text and 4.5:1 for large text. Non-text UI components and state indicators require a minimum 3:1 contrast ratio under Level AA.
About 8% of men and 0.5% of women have some form of color vision deficiency. Deuteranopia (red-green color blindness) is most common. Low contrast text affects a much larger population: anyone reading in bright sunlight, on a low-quality screen, or with any degree of visual impairment. Meeting WCAG AA contrast requirements makes your content accessible to millions more users.
Common mistakes
- Testing only one color pair — Check contrast for all color combinations in your design: primary text on background, secondary text, disabled states, link colors, error messages, and placeholder text.
- Ignoring text over images — Text overlaid on a photograph or gradient may have insufficient contrast in some regions. Use a semi-transparent overlay behind text to ensure consistent contrast.
- Relying on color alone to convey information — Beyond contrast, WCAG 1.4.1 requires that color is not the only visual means of conveying information (e.g., red error indicators should also have icons or text labels).