Low-contrast text is the most common WCAG failure and directly excludes users with low vision, color blindness, or anyone reading in suboptimal lighting conditions. WCAG 2.2 SC 1.4.3 requires a 4.5:1 ratio for normal text and 3:1 for large text at Level AA; SC 1.4.11 extends the same 3:1 requirement to non-text UI components. Failing this standard exposes SaaS products to ADA Title III litigation, which is disproportionately targeted at e-commerce and fintech.
Critical because contrast failures exclude real users from reading content at all — not a minor UX friction but a hard functional barrier that violates WCAG 2.2 SC 1.4.3 at Level AA.
Measure every text/background color pair in your CSS, Tailwind config, and component styles. Replace any combination that fails the 4.5:1 threshold for normal text or 3:1 for large text.
/* Before — fails at 2.85:1 on white */
.helper-text { color: #999999; }
/* After — passes AA at 4.62:1 on white */
.helper-text { color: #707070; }
For Tailwind projects, audit your tailwind.config.ts theme extension. Use the WebAIM Contrast Checker or Chrome DevTools Accessibility panel to measure computed values. When colors are defined as CSS custom properties that cannot be statically resolved, add a comment directing manual verification rather than assuming compliance.
ID: accessibility-wcag.perceivable.color-contrast
Severity: critical
What to look for: Count all distinct text color and background color combinations in CSS, Tailwind classes, and inline styles. Check global styles, component styles, and theme configuration. Large text is 18pt (24px) regular or 14pt (18.66px) bold. WCAG AA requires at least 4.5:1 ratio for normal text, at least 3:1 for large text.
Pass criteria: Count all distinct text/background color pairings found. 100% of text/background color combinations meet WCAG AA contrast ratios (at least 4.5:1 for normal text, at least 3:1 for large text). CSS custom properties and theme tokens resolve to compliant values. No more than 0 pairings may fall below the required ratio.
Fail criteria: Any text/background combination fails to meet the minimum contrast ratio for its size. Do NOT pass when color values use CSS variables that cannot be resolved -- flag the uncertainty rather than assuming compliance.
Dynamic theme guidance: When color values are defined as CSS custom properties or Tailwind theme tokens that cannot be resolved to specific hex values from the source code alone, check whether the design system's default values are accessible (e.g., default Tailwind colors are designed for accessibility). If colors truly cannot be resolved, note in the detail: "Color values use CSS variables/theme tokens — manual contrast verification recommended using browser dev tools or a contrast checker." Do NOT vacuously pass — flag the uncertainty.
Skip (N/A) when: Never.
Detail on fail: "Light gray text (#999) on white background (#fff) in body styles has 2.85:1 ratio — needs 4.5:1 for normal text" or "Placeholder text color in form inputs has insufficient contrast"
Remediation: Use a contrast checker to verify your color combinations. For Tailwind projects, check your theme colors:
/* Before — insufficient contrast */
.text-muted { color: #999; } /* 2.85:1 on white */
/* After — meets AA */
.text-muted { color: #737373; } /* 4.6:1 on white */
Tools like WebAIM's contrast checker or the Chrome DevTools accessibility panel can help identify issues.