Contrast Enhanced

title: "Contrast Enhanced — SC 1.4.6" weight: 15 description: "Learn WCAG Success Criterion 1.4.6 Contrast Enhanced: 7:1 for normal text and 4.5:1 for large text, the AAA level requirements, and how to design for enhanced contrast without sacrificing aesthetics." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

WCAG Success Criterion 1.4.6 Contrast Enhanced sets stricter thresholds at the AAA level: 7:1 for normal text and 4.5:1 for large text, providing a more readable experience for users with low vision beyond the minimum AA requirements.

## What You'll Learn

You will understand SC 1.4.6 requirements, when to target AAA, the design implications of higher contrast, and how to balance aesthetics with enhanced readability.

## Why It Matters

While AAA is not typically required by law, targeting enhanced contrast demonstrates a commitment to accessibility beyond compliance. It benefits all users, especially in low-light conditions, on low-quality displays, or for older users.

## Real-World Use

A government portal targets AAA compliance. Text colors must achieve 7:1 contrast. The primary text becomes #1a1a1a (14:1 against white) instead of the typical #333. The result is crisper text that is easier to read for all users, including those with mild vision loss.

## AAA Evaluation Flow

```mermaid
flowchart TD
  A[Text Element] --> B{AAA required?}
  B -->|Yes| C[Check 7:1 for normal]
  B -->|Yes| D[Check 4.5:1 for large]
  B -->|No| E{Targeting AAA?}
  E -->|Yes| C
  E -->|No| F[AA is sufficient]
  C --> G{Passes?}
  D --> G

Designing for AAA

AAA contrast requires darker text colors on light backgrounds and lighter text colors on dark backgrounds.

<!-- AAA compliant text -->
<p style="color: #1a1a1a; background: #fff;">
  AAA pass: 14:1 contrast ratio
</p>

<p style="color: #444; background: #fff;">
  AAA pass: 7.5:1 contrast ratio
</p>

<p style="color: #666; background: #fff;">
  AA pass: 4.6:1 -- fails AAA for normal text
</p>

/* AAA compliant color system */
:root {
  --text-primary: #1a1a1a; /* 14:1 on white -- AAA */
  --text-secondary: #444; /* 7.5:1 on white -- AAA */
  --text-muted: #555; /* 5.1:1 on white -- AA only, fails AAA */
  --link-color: #004080; /* 7.8:1 on white -- AAA */
  --link-hover: #002040; /* 11.5:1 on white -- AAA */
}

// AAA threshold checker
function checkAAA(ratio, isLarge) {
  const threshold = isLarge ? 4.5 : 7;
  return {
    passes: ratio >= threshold,
    threshold,
    ratio: ratio.toFixed(1),
    level: 'AAA',
    note: ratio >= threshold
      ? 'Passes AAA'
      : `Fails AAA: needs ${threshold}:1, got ${ratio.toFixed(1)}:1`
  };
}

// Demonstrate the difference
console.log(checkAAA(5.1, false)); // Fails AAA for normal text
console.log(checkAAA(5.1, true));  // Passes AAA for large text
console.log(checkAAA(7.5, false)); // Passes AAA for normal text

Common Mistakes

• Targeting AAA without understanding the design constraints
• Using overly dark colors that feel heavy in the design
• Forgetting that AAA applies to large text at 4.5:1
• Assuming AAA compliance is always legally required
• Sacrificing design quality for contrast
• Not using AAA as a design guideline instead of a hard rule
• Ignoring that some users prefer lower contrast (e.g., scotopic sensitivity)

Practice and Challenge

Practice 1: Determine if #444 on #fff passes AAA for normal text. Practice 2: Find a color that passes AA but fails AAA. Practice 3: Modify a color from #666 to pass AAA against white. Practice 4: Check if your link color passes AAA. Practice 5: Determine if AAA large text threshold is the same as AA normal text.

Challenge: Create a dual-level color system where each color has an AA variant and an AAA variant. Include at least 5 semantic colors (primary, secondary, text, link, error). For each, specify the AA hex and AAA hex, and document the contrast ratios against both white and light gray backgrounds.

FAQ

Mini Project

Create a design system color audit tool that checks every color in your design tokens against both AA and AAA thresholds. Output a matrix showing which tokens pass AA, which pass AAA, and which fail. Include suggestions for colors that need adjustment.

What's Next

Non-text Contrast - SC 1.4.11 covers contrast requirements for UI components and graphical objects.