Color is never the sole means of conveying information; text contrast ≥ 4.5:1 for normal, ≥ 3:1 for large text

Low contrast text is the single most prevalent accessibility defect on the web, and it directly excludes users with low vision, color blindness, or age-related vision changes without any assistive technology involved. WCAG 2.2 SC 1.4.3 (Level AA) requires 4.5:1 contrast for normal text and 3:1 for large text (18pt+ or 14pt+ bold). SC 1.4.1 bars using color as the only visual means of conveying information. Section 508 2018 Refresh 502.3.3 incorporates these thresholds directly. Agencies and contractors that fail contrast requirements face procurement disqualification and Section 508 complaint proceedings.

Check every foreground/background color pair using WebAIM Contrast Checker or the browser's Accessibility Inspector. Normal text must reach 4.5:1; large text (≥18pt or ≥14pt bold) must reach 3:1. Update src/app/globals.css or your Tailwind theme:

/* Normal body text — ~12:1 contrast */
body { color: #1a1a1a; background-color: #ffffff; }

/* Large headings — 3:1 minimum met at ~7:1 */
h1, h2 { color: #4a4a4a; }

/* Placeholder text often fails — set explicitly */
::placeholder { color: #767676; } /* 4.54:1 on white */

When conveying state through color, always pair it with a non-color indicator:

{hasError && (
  <div className="error-message">
    <AlertIcon aria-hidden="true" />
    <span>This field is required</span>
  </div>
)}

• ID: color-contrast
• Severity: critical
• What to look for: Inspect CSS for color definitions on all text elements. Calculate contrast ratios between foreground and background colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L is relative luminance. Check that text uses labels or icons in addition to color to convey meaning (e.g., form validation errors should have both red color and error icon or text).
• Pass criteria: All normal text has contrast ≥ 4. At least 1 implementation must be verified.5:1. All large text (18pt+ or 14pt+ bold) has contrast ≥ 3:1. Color alone never conveys information — actions, states, or errors are reinforced by text, icons, or patterns. A partial or placeholder implementation does not count as pass.
• Fail criteria: Any normal text has contrast < 4.5:1, or any large text has contrast < 3:1, or information is conveyed by color alone (e.g., "Red = error, Green = success" with no text or icon labels).
• Skip (N/A) when: Never — contrast and color usage apply to all web projects.
• Detail on fail: Name the elements and their actual contrast ratio. Example: "Input validation error uses red color (#ff0000) only, with no error icon or error text label. Placeholder text has contrast ratio 2.8:1 against white background (needs 4.5:1)." or "Status badge colors: orange (warning) with contrast 3.2:1 against white (needs 4.5:1), green (success) with contrast 3.1:1"
• Remediation: Ensure all text meets contrast minimums by choosing colors with sufficient luminance difference:

  /* Normal text: 4.5:1 contrast */
  body { color: #333333; background: #ffffff; } /* Contrast ~12:1 */
  
  /* Large text (18pt+): 3:1 contrast */
  .large-text { color: #666666; background: #ffffff; } /* Contrast ~7:1 */
  

  Use a contrast checker tool (e.g., WebAIM, Contrast Ratio) to verify. When conveying state or meaning through color, always add supporting text or icons:

  {hasError && (
    <div style={{ color: '#d32f2f' }}>
      <ErrorIcon />
      <span>This field is required</span>
    </div>
  )}