Color Contrast in Accessibility

Color alone should never carry information. Users with color blindness—or anyone using a phone in bright sunlight—need sufficient contrast and alternative visual cues.

⚠️ Common Trap

Using light gray text (e.g., #9CA3AF) on a white background for error messages, hoping that color alone will make everything clear.

📏 Golden Standard (WCAG AA)

• Normal text: minimum contrast ratio 4.5:1
• Large text (bold or 18px+): minimum contrast ratio 3:1

🛠️ Quick Code Fix

Instead of relying on color, use an icon + readable text + verified contrast:

// ✅ Correct: icon + high contrast (Tailwind) + role for screen readers
<div className="flex items-center gap-2 text-red-800 bg-red-50 p-3 rounded-md border border-red-200">
  <AlertIcon aria-hidden="true" />
  <span role="alert" className="font-medium">
    Password must be at least 8 characters.
  </span>
</div>

🔗 Recommended Testing Tools

• Browser extension: axe DevTools
• Quick website: contrast-ratio.com

5-second rule: If you squint a little or switch the page to grayscale, can you still identify errors, links, or states? If not, your contrast or visual cues are lacking.