Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds

The color-contrast-enhanced rule ensures that all text elements have sufficient contrast between the text color and the background color, meeting the stricter WCAG 2 AAA guidelines.

What is being tested?

This rule checks that:

• Small text has a contrast ratio of at least 7:1 against the background.
• Large text (≥ 18pt / 24px or 14pt / 19px bold) has a contrast ratio of at least 4.5:1.
• Text in images, gradients, or over complex backgrounds meets these same contrast ratios.

Why it matters

Low contrast makes it difficult for people with low vision, color blindness, or aging eyesight to read and understand content. Nearly three times as many people have low vision as total blindness, and around 8% of men have some form of color blindness. Adequate contrast ensures text is perceivable to everyone.

How to fix the problem

• Adjust text and background colors to meet the minimum contrast ratios:
  • 7:1 for small text
  • 4.5:1 for large or bold text
• Use tools like the Deque Color Contrast Analyzer or browser extensions to test and verify color combinations.
• Review color transparency, gradients, and layered elements in CSS to ensure they don’t lower effective contrast.

Good example

Foreground: #FFFFFF (white)
Background: #0000FF (blue)
Contrast Ratio: 8.59:1 → Passes AAA for small and large text

Incorrect example

Foreground: #777777 (gray)
Background: #FFFFFF (white)
Contrast Ratio: 3.5:1 → Fails AAA for small text

Best practices

• Use CSS variables or design tokens to manage color themes consistently across a site.
• Test text over gradients, background images, and semi-transparent overlays.
• Provide user settings to switch to a high-contrast or dark mode.