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

Sufficient contrast helps distinguish text from its background, including for people with low vision or when viewing conditions vary. A ratio check is one part of an accessibility review, not a measure of comfort for every reader.

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 helps keep text distinguishable. The ratio is calculated from relative luminance and ranges from 1:1 (identical luminance) to 21:1 (black on white).

What is Level AA?

WCAG 2.2 Success Criterion 1.4.3 sets these minimum text contrast ratios at Level AA:

  • 4.5:1 for normal text (typically below 18pt regular or 14pt bold).
  • 3.0:1 for large text (at least 18pt regular or 14pt bold).

What is Level AAA?

Level AAA uses stricter text contrast thresholds:

  • 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?

WCAG 2.2 Success Criterion 1.4.11 sets a 3:1 contrast requirement for visual information needed to identify applicable UI components and states, and for meaningful parts of graphics. It has exceptions and is separate from the text check above. Read the criterion.