Wcag Contrast Requirements

title: "WCAG Contrast Requirements — AA, AAA, Normal, and Large Text" weight: 13 description: "Master WCAG contrast thresholds: AA requires 4.5:1 for normal text and 3:1 for large text, AAA requires 7:1 for normal text and 4.5:1 for large text, with specific definitions for large text sizing." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

WCAG defines four contrast thresholds: AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1 -- with large text defined as 18pt font size or 14pt bold and above.

## What You'll Learn

You will understand each WCAG contrast threshold, when each applies, how to determine large text status, and how to target the right level for your project.

## Why It Matters

Different thresholds apply to different text sizes. Using the wrong threshold leads to false passes or unnecessary design restrictions. Understanding the distinctions ensures accurate compliance assessment.

## Real-World Use

A designer creates a banner with 24pt text at 3.5:1 contrast. Using the large text threshold, this passes AA (minimum 3:1) even though it would fail AA for normal text. The designer correctly applies the large text exemption.

## Contrast Requirements Flow

```mermaid
flowchart TD
  A[Text Element] --> B{What size?}
  B -->|>= 18pt| C[Large Text]
  B -->|>= 14pt bold| C
  B -->|< 18pt and not bold| D[Normal Text]
  B -->|< 14pt bold| D
  C --> E{AA: 3:1, AAA: 4.5:1}
  D --> F{AA: 4.5:1, AAA: 7:1}

Applying the Thresholds

Determine text size and weight first, then apply the correct threshold.

<!-- Large text examples -->
<p style="font-size: 24px;">
  This is large text (24px = 18pt) -- needs 3:1 for AA
</p>

<p style="font-size: 16px; font-weight: 700;">
  This is also large text (16px = 12pt, but bold at 700)
  -- needs 3:1 for AA
</p>

<!-- Normal text examples -->
<p style="font-size: 16px;">
  Normal text at 16px -- needs 4.5:1 for AA
</p>

<p style="font-size: 14px; font-weight: 600;">
  Semi-bold at 14px -- still normal text (needs 14pt bold for exemption)
</p>

/* WCAG AA compliant text sizes and contrasts */
.large-text-aa {
  font-size: 18pt;
  color: #777; /* 3.9:1 against white -- passes AA large */
  /* Would fail AA normal (needs 4.5:1) */
}

.normal-text-aa {
  font-size: 12pt;
  color: #555; /* 5.1:1 against white -- passes AA normal */
}

.aaa-text {
  font-size: 12pt;
  color: #444; /* 6.8:1 against white -- passes AAA normal */
}

// Threshold checker
function checkContrastThreshold(ratio, fontSize, fontWeight) {
  const isLargeText =
    fontSize >= 18 || // 18pt
    (fontSize >= 14 && fontWeight >= 700); // 14pt bold

  return {
    ratio,
    isLargeText,
    aaPass: isLargeText ? ratio >= 3 : ratio >= 4.5,
    aaaPass: isLargeText ? ratio >= 4.5 : ratio >= 7,
    threshold: isLargeText ? '3:1 (AA) / 4.5:1 (AAA)' : '4.5:1 (AA) / 7:1 (AAA)'
  };
}

console.log(checkContrastThreshold(3.5, 24, 400));
// { aaPass: true, aaaPass: false }

Common Mistakes

• Applying the normal text threshold to all text
• Using px instead of pt for size comparison (1pt = 1.333px)
• Not considering bold weight for large text exemption
• Assuming all heading text qualifies as large text
• Forgetting that small print and footnotes must meet normal thresholds
• Using the large text exemption for text that is not actually large
• Not documenting which threshold applies to which elements

Practice and Challenge

Practice 1: Determine the threshold for 20px text (not bold). Practice 2: Determine the threshold for 16px bold text. Practice 3: Check if #666 on #fff passes AA for 18pt text. Practice 4: Find a color that passes AA for large text but fails for normal. Practice 5: Calculate the minimum contrast for AAA large text.

Challenge: Create a text style guide with 10 typography variants (headings h1-h6, body, small, caption, button, link). For each variant, specify the font size, font weight, and minimum contrast ratio required for WCAG AA. Include the recommended color hex values that meet those thresholds.

FAQ

Mini Project

Create a text size and contrast reference card that shows: WCAG levels (AA/AAA), text types (normal/large) with size definitions, threshold ratios, example color pairs that pass each threshold, and a quick-reference table for common font sizes. Format it as a printable cheat sheet.

What's Next

Contrast Minimum - SC 1.4.3 covers the specific requirements of WCAG Success Criterion 1.4.3.