Free Tool

Color Contrast Checker

Verify that your text and background colors meet WCAG 2.1 accessibility standards. Check AA and AAA compliance instantly.

Quick presets

Live Preview

The quick brown fox

Regular text: The five boxing wizards jump quickly.

Small text: Pack my box with five dozen liquor jugs.

Contrast Ratio

17.06:1

Excellent — passes all levels

WCAG 2.1 Compliance

LevelNormal textLarge text
AA(≥ 4.5:1 / 3:1)
Pass
Pass
AAA(≥ 7:1 / 4.5:1)
Pass
Pass

Building an accessible website? Let an AI chatbot answer visitor questions 24/7.

No credit card required. Free plan available.

Understanding Color Contrast and Accessibility

Color contrast is essential for web accessibility. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is difficult to read for everyone, but especially challenging for users with visual impairments.

WCAG 2.1 (Web Content Accessibility Guidelines) defines two conformance levels for contrast: AA and AAA. Level AA is the minimum standard most organisations should meet, while AAA provides the highest level of accessibility.

The contrast ratio is calculated using the relative luminance of the foreground and background colors. A ratio of 1:1 means no contrast (same color), while 21:1 is the maximum contrast (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text.

Ensuring proper contrast not only helps users with disabilities — it improves readability for everyone, especially on mobile devices in bright sunlight or low-quality screens. Meeting WCAG standards is also a legal requirement in many jurisdictions.

Frequently Asked Questions

What is WCAG?+
The Web Content Accessibility Guidelines (WCAG) are international standards for making web content accessible to people with disabilities, including visual impairments. WCAG 2.1 defines minimum contrast ratios for text readability.
What contrast ratio do I need?+
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?+
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight. Large text has lower contrast requirements because it's inherently easier to read.
Does this check apply to images and icons?+
WCAG contrast requirements primarily apply to text. However, WCAG 2.1 also requires a minimum 3:1 contrast ratio for meaningful non-text elements like icons and UI components.
What's the difference between AA and AAA?+
AA is the minimum recommended standard for most websites. AAA is the highest level of accessibility and is recommended for critical content. Most organisations target AA compliance.

Make your website accessible to everyone

Add an AI chatbot that helps all visitors find answers — accessible, fast, and available 24/7.