Color Accessibility Guide for Tailwind CSS

Why Color Accessibility Matters

Approximately 4.5% of the population has some form of color blindness. Beyond that, many users experience temporary or situational vision impairments. Accessible color choices ensure your content is readable by everyone.

Understanding WCAG Contrast Requirements

WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text readability:

• Level AA (minimum): 4.5:1 for normal text, 3:1 for large text
• Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text
• Large text is defined as 18pt (24px) or 14pt (18.67px) bold
• Non-text contrast: 3:1 for UI components and graphics

Accessible Tailwind Color Combinations

These combinations meet WCAG AA standards:

• White text on: blue-600+, indigo-600+, purple-600+, gray-700+
• Black/slate-900 text on: All 50-300 shades of any color family
• slate-700 text on: White, gray-50, gray-100
• Avoid: Yellow/lime text on white, light grays on white

<!-- Good: High contrast combinations -->
<p class="text-slate-900 bg-white">High contrast text</p>
<p class="text-white bg-blue-600">Accessible button text</p>
<p class="text-slate-700 bg-gray-100">Subtle but readable</p>

<!-- Bad: Low contrast combinations -->
<p class="text-gray-400 bg-white">Hard to read</p>
<p class="text-yellow-400 bg-white">Very hard to read</p>

Don't Rely on Color Alone

Never use color as the only way to convey information. Always provide additional cues:

• Error states: Use icons and text labels, not just red color
• Links: Underline or use other visual indicators
• Charts: Use patterns or labels in addition to colors
• Form validation: Show text messages, not just color changes

Testing for Color Blindness

Test your designs with color blindness simulators. Common types to test for: Deuteranopia (red-green), Protanopia (red-green), and Tritanopia (blue-yellow).