WCAG Color Contrast Checker

Test any foreground and background color combination against WCAG 2.1 accessibility standards. This tool calculates the precise contrast ratio using the relative luminance formula from the W3C specification, then checks your colors against all four WCAG thresholds: AA normal text, AA large text, AAA normal text, and AAA large text. Use it during design, development, or accessibility audits to catch contrast issues before they reach production.

What contrast ratio do I need for WCAG compliance?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18px bold or 24px regular) and 3:1 for large text (18px bold or 24px regular and above). WCAG AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility laws and corporate policies reference WCAG AA as the baseline requirement. AAA is recommended where feasible but not always required by law.

Why does color contrast matter for accessibility?

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Beyond that, low contrast text is difficult for people with low vision, aging eyes, or anyone viewing a screen in direct sunlight or on a low-quality display. Sufficient contrast ensures your text is legible for the widest possible audience. Poor contrast is one of the most common accessibility failures on the web and one of the easiest to fix during the design phase.

Is WCAG color contrast required for ADA compliance?

The Americans with Disabilities Act does not name specific technical standards for websites, but courts and the Department of Justice consistently point to WCAG 2.1 Level AA as the de facto benchmark for digital accessibility. Meeting the WCAG AA contrast thresholds (4.5:1 for normal text, 3:1 for large text) is considered best practice for ADA compliance and significantly reduces legal risk. Many organizations also follow Section 508 standards, which directly reference WCAG 2.0 Level AA.