Provide enhanced contrast for critical UI components

WCAG 1.4.6
Contrast (Enhanced)

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

AA is the minimum—AAA contrast helps real users in real conditions.

Why this matters and how to fix it

Why this matters

Enhanced contrast helps users with low vision, users in bright or low-light environments, and users viewing screens on glare-heavy displays. While WCAG AA defines minimum contrast, many users need stronger contrast to comfortably read and operate UI.

How to fix this issue

Use at least 7:1 contrast for normal text and 4.5:1 for large text to meet AAA contrast. Consider offering an optional high-contrast theme or adapting UI based on system `prefers-contrast` settings.

Automated detection · Manual review recommended

Developer guidance

Focus enhanced contrast on high-importance UI elements: buttons, links, active states, status indicators, form labels, and error messages. Use design tokens or CSS variables to generate contrast-safe color sets and test them using automated contrast checkers.

Code examples

Incorrect Implementation

<span style='color:#666'>Status: OK</span>

Correct Implementation

<span style='color:#000'>Status: OK</span>

Real-World Examples

Before

<button style="color:#777; background:#eee">Submit</button> <!-- Hard to read for many users -->

After

<button style="color:#000; background:#fff; border:1px solid #000">Submit</button> <!-- Increased contrast improves readability -->

CSS Example (Guidance)

:root {
  --text-default: #111;
  --text-high-contrast: #000;
}

@media (prefers-contrast: more) {
  :root {
    --text-default: var(--text-high-contrast);
  }
}

.button {
  color: var(--text-default);
}

Manual testing

  1. 1. Identify key UI elements: labels, buttons, links, alerts, and status messages.
  2. 2. Verify text contrast meets at least 7:1 (normal text) or 4.5:1 (large text).
  3. 3. Turn on system high contrast mode (Windows, macOS, iOS, Android) and confirm UI remains legible.
  4. 4. Test the interface in high-glare environments (e.g., sunlight) to ensure readability.
  5. 5. If offering high-contrast mode toggle, verify it updates text, icon, and border contrast consistently.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance