Skip to content

Color Contrast Checker (WCAG AA / AAA)

Instantly check if your foreground and background color combination meets WCAG 2.1 accessibility standards. Live preview with exact contrast ratio.

WCAG Contrast Requirements Explained

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by users with low vision or color blindness.

  • WCAG AA — Normal text: minimum ratio of 4.5:1
  • WCAG AA — Large text (≥ 18pt or bold ≥ 14pt): minimum 3.0:1
  • WCAG AAA — Normal text: minimum 7.0:1
  • WCAG AAA — Large text: minimum 4.5:1

AA compliance is the legal standard in many jurisdictions (EU, US Section 508). AAA is the enhanced standard for maximum accessibility.

All ToolsJSON Formatter

Frequently Asked Questions

What is a good color contrast ratio?

WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text needs 3:1 (AA) or 4.5:1 (AAA).

What is the difference between AA and AAA?

AA is the standard most sites aim for and is often a legal baseline; AAA is a stricter, enhanced level for maximum accessibility.

How is the contrast ratio calculated?

It uses the WCAG 2.1 relative-luminance formula to compare the two colors, returning a ratio from 1:1 (identical) to 21:1 (black on white).

Does large text have different requirements?

Yes. Text 18pt+ (or 14pt bold) counts as large and only needs a 3:1 ratio for AA, because larger glyphs are easier to read.

Can I preview the colors live?

Yes. A live preview shows your chosen foreground and background together so you can judge readability as you adjust the hex values.

Why does contrast matter for accessibility?

Sufficient contrast ensures users with low vision or color blindness can read your content, and it improves legibility for everyone in bright conditions.