Skip to main content
Book Consultation →
Accessibility100% FreeInstant

Color Contrast Checker: WCAG AA and AAA Contrast Ratio

This free color contrast checker calculates the WCAG contrast ratio between a text color and a background color. It tells you whether the pair passes AA and AAA for normal text, large text and interface elements.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

Contrast is how clearly text stands out from its background. Low contrast is hard to read for people with low vision, color blindness, a dim screen or bright sunlight. Web Content Accessibility Guidelines (WCAG) set minimum ratios, and many laws and audits refer to them.

Enter two colors and the tool shows the exact ratio and every pass or fail.

How to Use This Tool

  1. Type the text color.
  2. Type the background color.
  3. Press Check.
  4. Read the ratio and the AA and AAA results.

How the Calculation Works

Each color is converted to linear light and its relative luminance is calculated with the WCAG weights: 0.2126 for red, 0.7152 for green and 0.0722 for blue. The contrast ratio is then (lighter + 0.05) ÷ (darker + 0.05), which ranges from 1:1 (no contrast) to 21:1 (black on white).

Worked Example

White text on #1d4ed8 blue has a ratio of about 6.7:1, which passes AA for all text and AAA for large text. Light grey #999999 on white is 2.85:1 and fails every level.

Common Uses

  • Checking brand colors before they go on a site.
  • Accessibility audits and legal compliance.
  • Designing dark mode palettes.
  • Choosing button and link colors.

Tips and Common Mistakes

  • Do not rely on color alone to carry meaning.
  • Test links, placeholders and disabled states too.
  • A pass in this tool is a minimum, not a guarantee that text is comfortable to read.

Next, you may need the color converter, color blindness simulator, color palette generator, color difference calculator.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

WCAG AA needs 4.5:1 for normal text and 3:1 for large text and user interface parts. AAA needs 7:1 for normal text and 4.5:1 for large text.
Text of at least 18 points (24 CSS pixels), or at least 14 points (about 18.7 pixels) when bold.
It is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one.
No. The ratio is the same either way, so you can swap the two colors.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.