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.
Low because contrast failures degrade readability for many users without making text completely invisible, and are typically caught and fixed with tooling rather than requiring architectural changes.
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: accessibility-basics.visual-color.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: