Icon Color Accessibility in Tailwind CSS

Icon Color Requirements

WCAG requires non-text content like icons to have at least 3:1 contrast against their background. Informational icons that convey meaning need both sufficient color contrast and text alternatives.

Icon Contrast Patterns

<!-- Good: High contrast icon -->
<button class="flex items-center gap-2 text-slate-700">
  <svg class="w-5 h-5" fill="currentColor" aria-hidden="true"><!-- icon --></svg>
  Settings
</button>

<!-- Good: Icon-only button with label -->
<button class="text-slate-600 hover:text-slate-900 p-2" aria-label="Close dialog">
  <svg class="w-6 h-6" fill="currentColor"><!-- x icon --></svg>
</button>

<!-- Bad: Low contrast decorative icon used for meaning -->
<span class="text-slate-300"><!-- icon --></span> <!-- 1.7:1 - too low -->

Status Icons with Color

<!-- Accessible status icons -->
<div class="flex items-center gap-2">
  <svg class="w-5 h-5 text-emerald-600" aria-hidden="true"><!-- checkmark --></svg>
  <span class="text-emerald-700 font-medium">Order shipped</span>
</div>

<div class="flex items-center gap-2">
  <svg class="w-5 h-5 text-red-600" aria-hidden="true"><!-- alert-triangle --></svg>
  <span class="text-red-700 font-medium">Payment failed</span>
</div>

Icon Accessibility Checklist

• Informational icons: 3:1 contrast minimum against background
• Decorative icons: Mark with aria-hidden="true"
• Icon-only buttons: Add aria-label describing the action
• Color-coded icons: Always pair with text label for color-blind users
• Interactive icon color: Must change on hover/focus to show it is clickable