WCAG Color Contrast Requirements — AA, AAA, and Non-Text Explained

WCAG 2.1 contains several contrast-related success criteria, and it is easy to confuse them. This article explains each requirement clearly: which numbers apply to which situations, what is exempt, and how to test compliance. No jargon beyond what is necessary.

Success Criterion 1.4.3 — Contrast (Minimum) — Level AA

This is the most commonly referenced contrast requirement. It applies to all text and images of text on a digital interface.

Requirements:

• Normal text: minimum contrast ratio of 4.5:1
• Large text: minimum contrast ratio of 3:1

What counts as large text: 18pt (24px) or larger at regular weight, or 14pt (approximately 18.67px) or larger at bold weight (CSS font-weight: 700 or higher).

What is exempt: Decorative text (where the text adds no information), logotypes (text that is part of a logo or brand name), inactive UI components (truly disabled controls that a user cannot interact with), and text in photographs where changing the text color is not possible.

Success Criterion 1.4.6 — Contrast (Enhanced) — Level AAA

The enhanced contrast standard at AAA. Same scope as 1.4.3 but with higher thresholds:

• Normal text: minimum contrast ratio of 7:1
• Large text: minimum contrast ratio of 4.5:1

The same exemptions apply (decorative text, logotypes, inactive components). AAA is not legally required in most jurisdictions but is strongly recommended for high-stakes or general-public-facing content.

Sell Custom Apparel — We Handle Printing & Free Shipping

Success Criterion 1.4.11 — Non-Text Contrast — Level AA

Added in WCAG 2.1, this criterion covers UI components and meaningful graphics. The requirement:

• Minimum contrast ratio of 3:1 for UI components and their states
• Minimum contrast ratio of 3:1 for parts of graphics required to understand the content

Examples of what this covers:

• The border of an input field against the form background (so users can see the input boundary)
• The focus ring/outline of a focused interactive element
• Checkboxes and radio buttons — the checkbox border must meet 3:1
• Icon-only buttons where the icon conveys the action
• Data visualization elements where color or position conveys meaning

Exempt: Logos and decorative graphics, disabled component states.

How contrast ratios are calculated

The WCAG contrast ratio uses the relative luminance formula from the W3C specification. In summary:

1. Each RGB channel value is converted from 0-255 to a 0-1 range
2. A gamma correction is applied to linearize the channel (the sRGB transfer function)
3. Relative luminance (L) is computed as a weighted sum: L = 0.2126R + 0.7152G + 0.0722B
4. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the higher luminance

The minimum result is 1:1 (identical colors) and the maximum is 21:1 (pure black vs pure white). The Color Contrast Checker applies this exact formula to any two hex color codes.

What is NOT covered by WCAG contrast requirements

Understanding the exemptions is as important as understanding the requirements:

• Background color changes only — if two boxes are the same background color and differ only in shade (not communicating information through color alone), no contrast ratio is required between them
• Purely decorative text overlays on images — if the text repeats information available elsewhere and is purely aesthetic
• Placeholder text — technically exempt under "inactive UI components" in some interpretations, but many accessibility experts recommend meeting contrast for placeholders anyway for practical usability
• Hover-only states — if a state is only visible on hover and an equivalent is accessible by keyboard, the hover visual alone may not need to meet contrast
• Focus indicator shape — while focus indicators need 3:1 contrast, WCAG 2.1 does not specify the minimum size of the indicator (WCAG 2.2 adds this)

Frequently Asked Questions

Does WCAG apply to images of text?

Yes. Images of text must meet the same 4.5:1 contrast ratio as actual text. The exemption for logotypes applies only to brand marks — not to text that has been rasterized into an image for design reasons.

What version of WCAG should I be targeting?

WCAG 2.1 Level AA is the current widely required standard in most accessibility laws. WCAG 2.2 (2023) adds a few new criteria around focus and authentication but does not change text contrast requirements. Target WCAG 2.1 AA as your minimum and review WCAG 2.2 additions.