Test your color combinations against WCAG AA and AAA accessibility standards. Real-time contrast ratio calculation.
The quick brown fox jumps over the lazy dog

How to use

  1. Choose your text (foreground) and background colors.
  2. Contrast ratio is calculated instantly (1:1 to 21:1 scale).
  3. Check pass/fail status for WCAG AA and AAA standards.
  4. Adjust colors until your combination passes the required level.

WCAG standards

  • AA Normal text — 4.5:1 minimum (most common requirement)
  • AA Large text (18pt+) — 3:1 minimum
  • AAA Normal text — 7:1 minimum (enhanced)
  • AAA Large text — 4.5:1 minimum

Use cases

  • Website accessibility compliance audits
  • Designing inclusive UI for visually impaired users
  • Government and corporate accessibility requirements
  • Brand color usability verification

Why contrast matters

Poor contrast makes text hard or impossible to read for users with low vision, color blindness, or in bright sunlight. WCAG (Web Content Accessibility Guidelines) from W3C defines minimum contrast ratios. Many jurisdictions require AA compliance for government and public-facing sites.

FAQ

What's "large text"?

18pt (about 24px) and larger, or 14pt (about 19px) bold and larger. Large text has a relaxed contrast requirement because its shape is easier to discern.

Should I aim for AA or AAA?

AA is the practical standard for most commercial sites. AAA is ideal for accessibility-focused projects and government services. AAA can be hard to achieve with brand colors.

Does this work for color-blind users?

Contrast ratio addresses brightness contrast, not hue distinction. For color-blind testing, also try our Color Blindness Simulator.

How is contrast ratio calculated?

Using WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors. Result ranges 1:1 (no contrast) to 21:1 (black on white).