Color Contrast & WCAG Checker

Color Contrast & WCAG Checker

Local Processing

Contrast ratio between text and background, WCAG AA/AAA results, and a readable text colour.

How It Works & Processing Standards

Contrast ratio between text and background, WCAG AA/AAA results, and a readable text colour.

Tool processing runs in your browser. If you create a calculator or conversion share link, its values are included in the URL. See the privacy policy for account, analytics and advertising data.

Current Limits

  • Maximum input length: 100,000 characters

Choose ratio, WCAG AA, WCAG AAA or text color suggestion under "Task". Normal text needs AA 4.5:1 and AAA 7:1; large text (18pt+, or 14pt+ bold) needs AA 3:1 and AAA 4.5:1.

Figures follow the WCAG formula and do not replace an accessibility certification.

What You Can Do

Contrast ratio
From 1:1 to 21:1 using relative luminance.
AA and AAA verdicts
Pass or fail for normal or large text.
Text color suggestion
Picks black or white, whichever reads better on the background.

How to Use Color Contrast & WCAG Checker

  1. 1
    Choose a taskRatio, verdict or suggestion.
  2. 2
    Enter colorsText (foreground) and background colors.
  3. 3
    Read the resultSee the ratio and whether it passes.

Examples

Grey text on white
Input: #777777 / #ffffff
Result: 4.48:1
AA normal text
Input: #777777 / #ffffff
Result: Fail (requires 4.5:1)
AAA normal text
Input: #333333 / #ffffff
Result: 12.63:1, pass (requires 7:1)
Text color on navy
Input: #1e3a8a
Result: Suggest #ffffff (10.36:1 against white)

Common Use Cases

  • Checking text contrast in an accessibility review
  • Choosing a text color for a brand-colored background

Frequently Asked Questions (FAQ)

#777777 is 4.48:1 — does that fail AA?

Yes. The threshold is 4.5:1 or more with no rounding up. The slightly darker #767676 gives 4.54:1 and passes.

Have feedback or ideas for this tool? Suggest & Inquire →