Skip to main content
PUBLIC.INTERNET
⚡ Instant Access🔒 Privacy First🆓 Always Free📱 Works Everywhere

WCAG Color Contrast Checker

A high-precision WCAG contrast checker that calculates color contrast ratios and provides instant Pass/Fail scores for AA and AAA accessibility compliance. Essential for designers and developers ensuring their text meets legal accessibility requirements. Enter any foreground and background color combination to see live previews and detailed WCAG 2.1 compliance results. All calculations happen in your browser with no uploads required. It is ideal for designers and marketers who want polished assets without opening heavyweight software. Tweak settings, preview changes instantly, then export and download in a clean format. Everything runs in your browser, so your files stay on your device. Built for speed, clarity, and repeat use.

Live Preview

Aa

The quick brown fox jumps over the lazy dog

Small text example (below 18px)

Contrast Ratio

21:1

Normal Text (AA)

Minimum 4.5:1

✅

Normal Text (AAA)

Minimum 7:1

✅

Large Text (AA)

Minimum 3:1

✅

Large Text (AAA)

Minimum 4.5:1

✅

Quick Reference

  • Normal text: Regular body text below 18px or bold text below 14px
  • Large text: 18px and larger, or bold text 14px and larger
  • AA (Minimum): Legal requirement for most websites
  • AAA (Enhanced): Higher standard for maximum accessibility

How to Use This Tool

  1. Choose colors using the color pickers or paste hex codes for your text (foreground) and background colors
  2. Review the contrast ratio displayed as a numeric value (e.g., 4.5:1) and see live text previews at different sizes
  3. Check compliance badges to see if your colors pass WCAG AA or AAA standards for normal and large text

Why This Method?

WCAG 2.1 defines contrast ratios using the relative luminance formula, which accounts for how human eyes perceive different colors. A ratio of 4.5:1 (AA standard) ensures text is readable for users with moderately low vision, while 7:1 (AAA standard) provides enhanced contrast for users with more severe vision impairments.

This tool uses the exact WCAG algorithm: converting RGB to linear values, calculating relative luminance with the formula L = 0.2126 * R + 0.7152 * G + 0.0722 * B, then computing the ratio between lighter and darker colors. The distinction between normal and large text exists because larger text is easier to read at lower contrast ratios.