WCAG AA vs AAA Color Contrast — What's the Difference?

WCAG 2.1 defines two levels of color contrast compliance: AA and AAA. Designers and developers often ask which one they need to meet, and the answer depends on what you are building, who uses it, and whether any legal standards apply. This guide explains both levels in plain terms.

What WCAG Level AA contrast requires

WCAG AA is the baseline standard referenced in most accessibility laws worldwide. The contrast requirements at AA are:

• 4.5:1 for normal text — defined as text below 18pt regular (24px) or below 14pt bold (approximately 18.67px bold)
• 3:1 for large text — 18pt or larger at regular weight, or 14pt or larger at bold weight

A ratio of 4.5:1 means the lighter color is 4.5 times more luminant than the darker color. Black (#000000) on white (#FFFFFF) has a ratio of 21:1 — the maximum possible. A medium gray like #767676 on white has almost exactly 4.5:1, sitting right at the AA threshold for normal text.

AA also applies to non-text contrast: UI components like buttons, form fields, and focus indicators need at least 3:1 against their backgrounds.

What WCAG Level AAA contrast requires

WCAG AAA is the enhanced standard. The contrast requirements at AAA are:

• 7:1 for normal text
• 4.5:1 for large text

Notice that the AAA large text requirement (4.5:1) is the same as the AA normal text requirement. The practical effect: if you meet WCAG AAA for all text, you are well above AA compliance by a wide margin.

A ratio of 7:1 is achievable with very dark or very light text colors. Dark navy (#1a1a2e) on white reaches 16:1. Most true black or near-black text on white or light gray exceeds 7:1 easily. The challenge comes with branded colors — a company's medium blue or green may hit 4.5:1 but not 7:1.

Sell Custom Apparel — We Handle Printing & Free Shipping

Which level does the law actually require?

Most legal standards reference WCAG AA, not AAA:

• ADA (United States) — the DOJ and courts consistently cite WCAG 2.1 Level AA as the benchmark for digital accessibility compliance
• Section 508 (US Federal) — directly incorporates WCAG 2.0 Level AA
• EN 301 549 (European Union) — references WCAG 2.1 Level AA
• AODA (Canada/Ontario) — requires WCAG 2.0 Level AA for public sector

AAA is generally treated as "best practice" rather than a legal requirement. Many organizations pursue AAA for high-impact text — body content, essential navigation, form labels — even if AAA is not legally mandated.

When you should target WCAG AAA

Target AAA when your audience includes people with low vision, older users, or anyone using screens in challenging conditions. Specific contexts where AAA is worth pursuing:

• Government services and healthcare portals — users may have visual impairments
• Long-form content (documentation, articles, educational materials)
• Applications used in bright outdoor environments or on low-brightness mobile screens
• Financial or legal documents where misreading has consequences

For most commercial websites, AA compliance is the minimum floor. Shooting for AAA where it fits your design is good practice even when not required.

How to check AA and AAA compliance at the same time

The Color Contrast Checker shows all four thresholds simultaneously — AA normal, AA large, AAA normal, and AAA large — for each color pair you enter. You see at a glance which level your combination meets and which it falls short of.

If your combination fails AA but you cannot change the colors (say, for brand compliance), the "Suggest Passing Color" button adjusts the foreground to the nearest shade that at least meets AA. You can then discuss with brand teams whether the adjusted shade is acceptable.

Frequently Asked Questions

If I meet WCAG AAA, do I automatically meet AA?

Yes. AA is a lower bar than AAA. Any color pair that meets WCAG AAA (7:1 for normal text, 4.5:1 for large text) automatically satisfies WCAG AA requirements as well.

Does WCAG 2.2 change the contrast requirements?

WCAG 2.2 did not change the contrast ratio requirements for text (Success Criteria 1.4.3 and 1.4.6). The same 4.5:1 and 7:1 thresholds apply. WCAG 2.2 added requirements for focus indicators, but text contrast remains the same.