# Color contrast meets WCAG AA standards

- **Pattern:** `ab-000065` (`accessibility-basics.visual-color.color-contrast`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000065
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000065)

## Why it matters

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.

## Severity rationale

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.

## Remediation

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.

```css
/* 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.

## Detection

- **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:

  ```css
  /* 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

## External references

- wcag 1.4.3
- wcag 1.4.6
- section-508 302.7

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-000065