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.

• ID: color-contrast

• Severity: low

• What to look for: Enumerate every relevant item. Examine text color against background color across the site. Use contrast checking tools or calculate ratios. Required minimums: 4.5:1 for normal text (14px or smaller), 3:1 for large text (18px or larger, or 14px bold or larger) and UI components. Check all text, including text in images and icons.

• Pass criteria: At least 1 of the following conditions is met. All text and UI components meet 4.5:1 contrast for normal text and 3:1 for large text. Light and dark backgrounds both meet standards.

• Fail criteria: Any text or UI component has contrast lower than required minimums.

• Skip (N/A) when: Never — color contrast applies to all pages with text.

• Detail on fail: Identify problem areas. Example: "Gray body text (#777) on white background has 5.2:1 contrast. Form labels (#888) have 4.1:1 contrast, below 4.5:1 minimum. Button text (#555) on light gray button has 2.8:1 contrast."

• Remediation: Adjust colors to meet contrast requirements:

  /* Bad: Low contrast */
  body { color: #777; } /* 5.2:1 — borderline */
  label { color: #888; } /* 4.1:1 — too low */
  button { color: #555; } /* 2.8:1 — too low */
  
  /* Good: High contrast */
  body { color: #333; } /* 12.6:1 */
  label { color: #000; } /* 21:1 */
  button { color: #000; } /* High contrast */
  

  Use online tools to verify contrast:

  • WebAIM Contrast Checker (webaim.org/resources/contrastchecker)
  • Axe DevTools (browser extension)
  • WAVE browser extension