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.
Top comments (1)
small correction on the large-text threshold: WCAG uses 18pt regular or 14pt bold, not 18px or any bold text. 18pt is about 24 CSS px, so an 18px regular label still needs 4.5:1. the W3C explanation: w3.org/WAI/WCAG22/Understanding/co...