Why Color Accessibility Matters
According to the WHO, approximately 300 million people worldwide have color vision deficiency. Creating accessible color combinations isn't just about compliance—it's about inclusion.
Understanding WCAG Contrast Requirements
Level AA (Minimum)
- Normal text: 4.5:1 contrast ratio
- Large text (18px+ or 14px+ bold): 3:1 contrast ratio
Level AAA (Enhanced)
- Normal text: 7:1 contrast ratio
- Large text: 4.5:1 contrast ratio
Safe Tailwind Color Combinations
On White Background
| Text Color | Ratio | AA | AAA |
|---|---|---|---|
text-gray-700 | 8.59:1 | ✅ | ✅ |
text-gray-900 | 16.10:1 | ✅ | ✅ |
text-blue-700 | 5.96:1 | ✅ | ❌ |
On Dark Background (gray-900)
| Text Color | Ratio | AA | AAA |
|---|---|---|---|
text-gray-100 | 13.35:1 | ✅ | ✅ |
text-white | 16.10:1 | ✅ | ✅ |
Common Mistakes
Don't Use Color Alone
<!-- Bad -->
<span class="text-red-500">Error</span>
<!-- Good -->
<span class="text-red-600 flex items-center gap-2">
<svg><!-- Error icon --></svg>
Error: Please fix this field
</span>
Tools for Testing
Use our Contrast Checker and Color Blindness Simulator to validate your designs.