WCAG Color Contrast Requirements Explained — 4.5:1 & 3:1 Ratios Guide 2026

If you've ever wondered "what are the WCAG color contrast requirements?" — you're not alone. The Web Content Accessibility Guidelines (WCAG) 2.1 Level AA define specific contrast ratios that all websites must meet: 4.5:1 for normal text and 3:1 for large text. But what do these numbers actually mean, and how do you check if your website complies?

This comprehensive guide explains WCAG color contrast requirements in plain language — from the math behind contrast ratios to practical tips for fixing violations.

📌 Quick Answer — WCAG Color Contrast Requirements

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ / 14pt bold). Level AAA requires 7:1 and 4.5:1 respectively. These ratios ensure text is readable for users with low vision.

✅ Test Your Website's WCAG Color Contrast

Use our free color contrast checker to test your text and background combinations against WCAG 2.1 standards.

Free Color Contrast Checker →

What Are WCAG Color Contrast Requirements?

The WCAG color contrast requirements are defined in Success Criterion 1.4.3 — Contrast (Minimum) and 1.4.6 — Contrast (Enhanced). These criteria specify the minimum contrast ratio between text and its background to ensure readability.

The contrast ratio is calculated using the relative luminance of two colors. The formula is:

(L1 + 0.05) / (L2 + 0.05)

Where L1 is the luminance of the lighter color and L2 is the luminance of the darker color.

📊 WCAG Contrast Requirements Summary

What is a Contrast Ratio?

A contrast ratio is a number that represents the difference in brightness between two colors. The higher the number, the greater the difference. For example:

The contrast ratio is calculated using the relative luminance of each color. A ratio of 21:1 is the maximum possible, while 1:1 is the minimum (identical colors).

WCAG 2.1 Contrast Requirements — AA vs AAA

Text Type Level AA Level AAA Required By
Normal Text 4.5:1 7:1 ADA, EAA, Section 508
Large Text (18pt+ / 14pt bold) 3:1 4.5:1 ADA, EAA, Section 508
UI Components / Graphics 3:1 Not defined ADA, EAA

What is "Normal Text" vs "Large Text"?

WCAG defines two categories of text for contrast requirements:

Normal Text

Large Text

What Color Combinations Pass WCAG Contrast?

Always Pass (AAA)

Pass AA (May Fail AAA)

Fail AA (Common Violations)

🎨 Test Your Colors Against WCAG

Free color contrast checker — test your text and background colors against WCAG 2.1 AA standards.

Free Color Contrast Checker →

No signup. Instant results. WCAG 2.1 AA.

How to Check WCAG Color Contrast on Your Website

Step 1: Use a Free WCAG Contrast Checker

Visit AccessiTool's free color contrast checker and enter your foreground and background colors. The tool will instantly tell you if your combination passes WCAG 2.1 AA or AAA.

Step 2: Test All Text Combinations

Test every text and background combination on your website — body text, headings, buttons, links, form labels, and placeholders.

Step 3: Fix Failing Combinations

If a combination fails, adjust your colors. Darken text, lighten backgrounds, or choose a different color combination entirely.

Step 4: Document Your Accessible Color Palette

Create a documented color palette that includes only WCAG-compliant combinations. This ensures consistency across your website.

Common WCAG Color Contrast Violations

1. Placeholder Text

Placeholder text is often too light. WCAG requires that placeholder text also meets contrast requirements (4.5:1 for AA).

2. Gray Text on White Backgrounds

Gray text on white backgrounds is the most common violation. Many designers use #999999 on white — which fails (2.2:1). Use #555555 or darker instead.

3. Light Blue Links

Light blue links on white backgrounds often fail contrast requirements. Use darker blue (#1976D2) for links.

4. Disabled Buttons

Disabled buttons are often styled with low contrast. WCAG requires that disabled buttons also meet contrast requirements.

5. Error Messages

Red error messages on white backgrounds may pass, but red on light gray or red on red fails. Test all error message color combinations.

How to Fix Low Color Contrast

1. Darken the Text

If your text is too light, darken it. For example, change #999999 to #555555.

2. Lighten the Background

If your background is too dark, lighten it. For example, change #333333 to #FFFFFF.

3. Use a Different Color Combination

If darkening or lightening doesn't work, choose a different color combination entirely.

4. Add a Background Shade

If text is on a busy background image, add a shaded overlay behind the text to improve contrast.

Frequently Asked Questions — WCAG Color Contrast Requirements

❓ What is the WCAG color contrast requirement? ▼
WCAG 2.1 Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively.
❓ What is the contrast ratio for WCAG 2.1 AA? ▼
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ / 14pt bold).
❓ What is the difference between AA and AAA contrast? ▼
AA requires 4.5:1 for normal text. AAA requires 7:1. AAA is a higher standard for enhanced accessibility.
❓ How do I check if my website meets WCAG contrast requirements? ▼
Use our free color contrast checker to test your text and background colors against WCAG 2.1 standards.
❓ Does WCAG apply to all text on a website? ▼
Yes. WCAG applies to all text content, including body text, headings, buttons, links, form labels, and placeholders. It also applies to UI components and graphics.

🎨 Test Your WCAG Color Contrast Today

Free color contrast checker — no signup required. Instant results.

Free Color Contrast Checker →

Internal Links — WCAG Color Contrast Resources

Share