Text and UI components have sufficient color contrast

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.

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.