Color contrast meets WCAG AA standards

Gray text on a white background — a common design choice for body copy, labels, and placeholder text — fails WCAG 2.2 SC 1.4.3 (Contrast Minimum) when the ratio drops below 4.5:1 for normal text or 3:1 for large text. SC 1.4.6 (Enhanced Contrast) sets a higher AAA bar of 7:1. Section 508 2018 Refresh 302.7 enforces visual contrast. The most common specific failure: #888 text on #ffffff background produces a 3.5:1 ratio — passing for large text but failing for body copy. Form label text, placeholder text, and secondary captions are the most frequently failing elements. Approximately 8% of men have color vision deficiencies that reduce their effective contrast perception, and low contrast also affects users in bright sunlight or on low-quality displays.

Use a contrast checker (WebAIM at webaim.org/resources/contrastchecker, or Chrome DevTools Rendering > Accessibility) to audit your design tokens. Update CSS custom properties or Tailwind config rather than individual color values.

/* globals.css — replace low-contrast tokens */
:root {
  /* Bad: #888 on white = 3.5:1 (fails AA for normal text) */
  /* --text-secondary: #888; */

  /* Good: #595959 on white = 7.0:1 (passes AAA) */
  --text-secondary: #595959;

  /* Good: #767676 on white = exactly 4.54:1 (just passes AA) */
  --text-muted: #767676;

  /* Large text (18px+ or 14px bold): 3:1 minimum */
  --text-large-label: #949494; /* 2.85:1 — still fails. Use #767676 */
}

/* Check button states separately */
button:disabled {
  /* Disabled buttons are exempt from 1.4.3 but not from 1.4.11 */
  color: #999;
}

Also check: placeholder text (exempt from 1.4.3 per the spec, but should still be legible), text overlaid on images, and text inside SVGs.