Form Validation Colors in Tailwind CSS

Validation Color States

Forms need four color states: default, focus, error, and success. Each must be visually distinct and accessible. Never rely on color alone; always pair with text messages and icons.

Input State Patterns

<!-- Default state -->
<input class="border border-slate-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none" placeholder="Email" />

<!-- Error state -->
<div>
  <input class="border-2 border-red-500 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 bg-red-50 outline-none" value="bad-email" />
  <p class="text-red-600 text-sm mt-1 flex items-center gap-1">
    <svg class="w-4 h-4"><!-- x-circle icon --></svg>
    Please enter a valid email address
  </p>
</div>

<!-- Success state -->
<div>
  <input class="border-2 border-emerald-500 rounded-lg px-4 py-2 bg-emerald-50 outline-none" value="user@example.com" />
  <p class="text-emerald-600 text-sm mt-1 flex items-center gap-1">
    <svg class="w-4 h-4"><!-- check-circle icon --></svg>
    Email is valid
  </p>
</div>

Accessibility Considerations

• Never use color alone to indicate errors; always include text messages and icons
• Error text (red-600) meets WCAG AA contrast on white backgrounds
• Use aria-invalid and aria-describedby for screen reader support
• Thicker borders (border-2) make state changes visible to color-blind users
• Subtle background tints (red-50, emerald-50) reinforce state without overwhelming

Inline Validation Pattern

<!-- Password strength indicator -->
<div class="flex gap-1 mt-2">
  <div class="h-1 flex-1 rounded bg-red-500"></div>
  <div class="h-1 flex-1 rounded bg-red-500"></div>
  <div class="h-1 flex-1 rounded bg-slate-200"></div>
  <div class="h-1 flex-1 rounded bg-slate-200"></div>
</div>
<p class="text-sm text-red-600 mt-1">Weak password</p>