• June 1, 2025

Color Contrast Accessibility Compliance

Rule ID: color-contrast
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549

How to Fix the Problem

To meet WCAG 2 AA requirements, ensure all visible text maintains a sufficient contrast ratio with its background. Specifically:

• Small Text: Minimum contrast ratio of 4.5:1

• Large Text: Minimum contrast ratio of 3:1
  (Large text = 18pt regular / 14pt bold or larger)

Steps to Fix:

1. Identify Problematic Elements: Use automated tools like axe DevTools, Color Contrast Analyzer, or browser extensions to find text with insufficient contrast.

2. Adjust Colors: Modify either the foreground (text) or background color to increase contrast. This can include:

   • Making text darker or lighter

   • Changing background shades

   • Avoiding pastel-on-pastel or low-brightness combinations

3. Avoid Transparency Issues: Ensure opacity levels do not reduce effective contrast. Be cautious with CSS gradients, overlays, and pseudo-elements.

4. Verify After Changes: Use color contrast checkers to confirm compliance before final deployment.

5. Test in Context: Manual review may still be required for:

   • Text over images or gradients

   • Dynamic content

   • Hover/focus states

Color Contrast Tools:

• axe DevTools Chrome/Firefox Extensions

• Color Contrast Analyzer by TPGi

• WAVE Evaluation Tool

Why it Matters

A significant portion of users have low vision or color blindness—conditions that hinder their ability to distinguish similar color tones. Low contrast text may be entirely unreadable for these users, impacting their ability to:

• Navigate interfaces

• Comprehend content

• Complete tasks

In fact:

• Nearly 8% of men and 0.4% of women experience color blindness.

• People with low vision outnumber those who are blind by nearly 3 to 1.

Low contrast can be especially problematic in:

• Buttons

• Form fields

• Labels and error messages

• Informational alerts and instructions

Sufficient contrast ensures readability and functional accessibility for everyone, especially in low-light environments or on sub-optimal displays.

Rule Description

All text must maintain a sufficient contrast ratio with its background color to ensure visibility for users with visual impairments. This includes:

• Regular and bold text

• Text on solid, gradient, or image backgrounds

• Text rendered by CSS or HTML

This rule supports compliance with WCAG 2.0/2.1/2.2 AA, Trusted Tester, and EN 301 549 guidelines.

The Algorithm (in Simple Terms)

1. Locate all visible text nodes on the page.

2. Calculate contrast ratio between text color and background color.

3. Check thresholds:

   • ≥4.5:1 for normal text

   • ≥3:1 for large text

4. Ignore cases where:

   • Backgrounds are images or gradients

   • Text is hidden or outside the viewport

   • Text belongs to a disabled element

If contrast is below threshold, flag the element as a violation.