✦ LiveTheme

WCAG Color Contrast Checker

Verify that your foreground text and background colors have enough contrast to meet Web Content Accessibility Guidelines (WCAG).

Background

Foreground

Contrast Ratio
21:1
Passes Guidelines

Normal Text

< 18pt or 14pt bold

WCAG AA
Pass
WCAG AAA
Pass

Large Text

≥ 18pt or 14pt bold

WCAG AA
Pass
WCAG AAA
Pass

Live Preview Component

Visual Example

Reading Panel

Designing for everyone

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Ensuring high contrast helps all users parse information more efficiently.

Inverted Panel

Focus on Legibility

Good contrast isn't just for accessibility—it's a hallmark of premium, confident design. It prevents eye strain during long sessions or in poor lighting.

Understanding WCAG Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) are a set of international standards designed to make web content more accessible to people with disabilities. A critical part of these guidelines is the contrast ratio between text (the foreground) and its background.

Adequate contrast ensures that text is readable for users with low vision, color blindness, or environmental factors like screen glare. The contrast ratio is calculated mathematically and ranges from 1:1 (white on white, completely illegible) to 21.1:1 (black on white, maximum contrast).

What is Level AA?

WCAG Level AA is the global standard for most commercial and public websites. To pass Level AA, your text must meet these minimum contrast ratios:

  • 4.5:1 for normal text (typically below 18pt regular or 14pt bold).
  • 3.0:1 for large text (18pt and above) and UI components like input borders and icons.

What is Level AAA?

Level AAA is a stricter standard, usually required for specialized government, education, or accessibility-focused platforms. To pass Level AAA:

  • 7.0:1 for normal text.
  • 4.5:1 for large text.

Frequently Asked Questions

Why did my color fail the test?

If a combination fails, it means there isn't enough visual difference in lightness (luminance) between the two colors. For example, placing medium gray text on a light gray background often fails. To fix it, you need to make the dark color significantly darker, or the light color significantly lighter.

Do borders and icons need to pass WCAG?

Yes! Under WCAG 2.1, "Non-Text Contrast" states that active user interface components (like input borders, buttons, and meaningful icons) must maintain a contrast ratio of at least 3.0:1 against adjacent colors.