Color is not the sole means of conveying information

Error states indicated only by a red border, status indicated only by a green/red dot, and form field requirements indicated only by an asterisk colored red — all three convey meaning exclusively through color. Approximately 8% of men and 0.5% of women have some degree of red-green color vision deficiency; for them, red and green may appear as identical shades of brown. WCAG 2.2 SC 1.4.1 (Use of Color) explicitly prohibits color as the sole visual means of conveying information. Section 508 2018 Refresh 302.7 enforces visual accessibility. The concrete failure: a form with red-bordered invalid fields shows no error text — a user with protanopia sees a border of indeterminate color and has no way to identify the problem or its nature.

Every color-coded status must be accompanied by a text label, icon, pattern, or structural cue. In form validation, this means visible error text — not just a colored border.

// Bad: Red border with no text
<input
  type="email"
  style={{ borderColor: hasError ? 'red' : 'gray' }}
/>

// Good: Border + icon + text
<div className="field">
  <label htmlFor="email">Email</label>
  <div className="input-wrapper">
    <input
      id="email"
      type="email"
      aria-invalid={hasError}
      aria-describedby={hasError ? 'email-error' : undefined}
      className={hasError ? 'border-red-600' : 'border-gray-300'}
    />
    {hasError && <ErrorIcon aria-hidden="true" />}
  </div>
  {hasError && (
    <p id="email-error" className="text-red-700">
      {/* Text conveys the error — color reinforces it */}
      Please enter a valid email address.
    </p>
  )}
</div>

For status indicators (online/offline, success/error), always pair the color with text or an icon with an accessible label:

// Bad
<span className="bg-green-500 rounded-full w-3 h-3" />

// Good
<span className="flex items-center gap-1">
  <span className="bg-green-500 rounded-full w-3 h-3" aria-hidden="true" />
  <span className="text-sm">Online</span>
</span>