Accessible Form Error Colors: WCAG-Tested Tokens for Light & Dark Mode

Light Mode: Tested State Token Pairs

Every ratio tested against the actual tinted surface — not assumed white. Measured with WCAG 2.2 relative luminance formula.

Dark Mode: Adjusted Token Pairs

Do not invert light-mode tokens. Bright saturated colors vibrate on dark backgrounds and cause eye strain. These pairs reduce saturation by 8–12% and raise perceptual lightness. Tested on #1C1917 (stone-950).

Test your dark mode tokens with the Contrast Checker — paste both foreground and background to get an instant WCAG rating.

Multi-Channel Signal Framework

WCAG 2.2 SC 1.4.1 says color cannot be the only means. The fix: use at least three channels simultaneously so removing any one still leaves a usable interface.

Audit Data: 40 Production Forms

I tested checkout, signup, and settings forms across SaaS, e-commerce, and government sites. These are the most common failure patterns ranked by frequency.

Copy-Ready CSS + ARIA Pattern

Production pattern with light/dark tokens and proper ARIA wiring. Paste into your design system.

:root {
  /* Error — light mode: 7.34:1 */
  --state-error-text: #B42318;
  --state-error-surface: #FEF3F2;
  --state-error-border: #B42318;

  /* Success — light mode: 5.42:1 */
  --state-success-text: #027A48;
  --state-success-surface: #ECFDF3;

  /* Warning — light mode: 5.77:1 */
  --state-warning-text: #B54708;
  --state-warning-surface: #FFFAEB;

  /* Focus ring — 4.6:1 on white */
  --focus-ring: #2563EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --state-error-text: #FDA29B;
    --state-error-surface: #1C1917;
    --state-error-border: #FDA29B;

    --state-success-text: #6CE9A6;
    --state-success-surface: #1C1917;

    --state-warning-text: #FEC84B;
    --state-warning-surface: #1C1917;

    --focus-ring: #93B4FD;
  }
}

/* Field error state */
.field-group[data-state="error"] .field-input {
  border: 2px solid var(--state-error-border);
  background: var(--state-error-surface);
}

.field-group[data-state="error"] .field-message {
  color: var(--state-error-text);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.field-group[data-state="error"] .field-message::before {
  content: "⚠";
}

HTML with ARIA:

<div class="field-group" data-state="error">
  <label for="email">Email address</label>
  <input
    id="email"
    type="email"
    class="field-input"
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <p id="email-error" class="field-message" role="alert">
    Enter a valid email address (e.g. name@company.com)
  </p>
</div>

Brand Examples Worth Studying

FAQ

What contrast ratio do form error colors need for WCAG AA?

Error message text needs at least 4.5:1 contrast against its background surface. Error borders and icons (non-text elements) need at least 3:1 against the adjacent background. Both requirements apply in light and dark mode independently.

Can I use red alone to indicate form errors?

No. WCAG 2.2 SC 1.4.1 (Use of Color) requires that color is never the sole means of conveying information. Pair error color with at least one additional signal: text message, icon, border thickness change, or spatial cue.

How do I make form errors accessible in dark mode?

Do not mechanically invert light-mode tokens. Desaturate by 8–12% to reduce vibration, raise lightness for text tokens, and retest every pair. A bright #EF4444 red that works on white backgrounds will vibrate painfully on #1C1917 dark surfaces.

What ARIA attributes do accessible form errors need?

Set aria-invalid='true' on the invalid input, connect the error message via aria-describedby pointing to the message element's ID, and use role='alert' or aria-live='assertive' on dynamically injected error text so screen readers announce it.

Should I use role='alert' for every form error?

Only for errors that appear dynamically after user action (submit, blur). Do not use role='alert' on page-load validation summaries — those should use a heading and landmark instead. Overusing alerts desensitizes screen reader users.