Fix Color Contrast Issues

Color contrast failures happen when the luminance ratio between text (or a meaningful UI element) and its background falls below the WCAG 2.1 AA thresholds: 4.5:1 for body text under 18pt, 3:1 for large text and graphical controls. Tailwind and Material palettes both contain pairings that look fine in the design tool but fail in production.

Low contrast is the single most common automated WCAG failure on the public web — and the most common cause of Section 508 remediation findings in government audits. It directly affects users with low vision, color vision deficiency, and anyone using a screen in bright sunlight.

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) is testable and binary; lawsuits cite it constantly because the math is objective.

// text-gray-400 on bg-gray-100 → 2.5:1 (fails AA)
<p className="text-gray-400 bg-gray-100">
  Forgot your password?
</p>

<button className="bg-blue-300 text-white">
  Save
</button>

// text-gray-700 on bg-gray-100 → 8.6:1 (passes AAA)
<p className="text-gray-700 bg-gray-100">
  Forgot your password?
</p>

// bg-blue-600 on white text → 4.78:1 (passes AA)
<button className="bg-blue-600 text-white">
  Save
</button>

The fix is usually a one-shade adjustment, not a redesign. fixa11y identifies the failing pair, computes the actual ratio, and suggests the nearest token that passes AA while staying close to the original visual weight.

fixa11y parses Tailwind classes, inline styles, and CSS variables to compute the rendered contrast ratio for every text node and interactive element. When a pair fails, the fixer proposes a replacement from the same design token family — keeping the look consistent — and reports the new ratio next to the WCAG threshold.

The CLI's JSON report includes every failing pair with line numbers, the measured ratio, and the proposed replacement, which enterprises feed directly into Jira and ServiceNow remediation tickets.