What is WCAG color contrast?

WCAG includes contrast requirements. Under WCAG 2.2 SC 1.4.3, common AA thresholds are 4.5:1 for normal text and 3:1 for large text. This calculator evaluates one color pair, not an entire page.

What is the difference between AA and AAA contrast?

AA and AAA are WCAG conformance levels. A color-pair result alone does not certify a complete interface, full WCAG conformance, or legal compliance.

How do I fix a failing contrast ratio?

Darken the foreground color or lighten the background color until the ratio meets the selected contrast threshold. Use HSL color notation to adjust lightness while preserving hue and saturation.

Does contrast affect SEO?

Contrast is not a direct ranking factor. Good contrast can make content easier to use, but a color-ratio check is not a substitute for a broader accessibility review.

contrast

StudioLimb

WCAG contrast thresholds

Contrast Checker

Accessibility Tool Premier

Text Color

Background Color

12.63

Contrast Ratio

Large Text Preview (18pt+)

Design requires contrast to convey meaning clearly.

Normal Text Preview (Base Size)

In order to be accessible, text must have a high enough contrast ratio against its background. WCAG contrast criteria define common AA and AAA thresholds; this tool checks the selected color pair only.

warning Fix Contrast Issues

Auto-adjust Text Color

Auto-adjust Background

Free reference

The 47 Tools Cheat Sheet

One printable page with every tool on this site, what it does, and when to reach for it. Free. It asks for an email so Gumroad can send you the file, unlike the tools themselves.

download Get the free PDF menu_book See the paid handbook

WCAG Color Contrast Ratio Checker — AA & AAA Thresholds

Check the contrast ratio between any text and background color pair. Get pass/fail results against common AA and AAA thresholds for normal and large text. A passing pair does not by itself verify a complete interface or legal compliance.

help How to Use

Enter your text color as a hex code
Enter your background color as a hex code
See the contrast ratio and WCAG pass/fail results
Adjust colors until you reach the selected threshold

check_circle WCAG Requirements

4.5:1 — normal text (AA minimum)
3:1 — large text (AA)
7:1 — normal text (AAA enhanced)
4.5:1 — large text (AAA enhanced)

tips_and_updates Common Fixes

Darken the text color — most effective fix
Add a subtle tint to the background
Increase font size or weight (lower threshold)
Avoid #999 or lighter on white backgrounds