Text Color Readability Guide for Tailwind CSS

Text Readability Fundamentals

Readable text requires sufficient contrast against its background, appropriate sizing, and consistent color usage. Poor text color choices are the most common accessibility failure on the web.

Minimum Contrast by Text Size

• Small text (under 18px): Minimum 4.5:1 contrast ratio (WCAG AA)
• Large text (18px+ or 14px+ bold): Minimum 3:1 contrast ratio
• Heading text: Can use slightly lower contrast if large enough
• Placeholder text: No minimum, but still aim for 3:1 for usability
• Decorative text only: No contrast requirement

Safe Text Color Pairings

<!-- On white background -->
<p class="text-slate-900">Primary text — 15.4:1 ratio</p>
<p class="text-slate-700">Secondary text — 8.2:1 ratio</p>
<p class="text-slate-500">Tertiary text — 4.6:1 ratio (AA pass)</p>
<p class="text-slate-400">Fails AA — avoid for important text</p>

<!-- On dark background -->
<div class="bg-slate-900">
  <p class="text-white">Primary — 15.4:1</p>
  <p class="text-slate-300">Secondary — 7.5:1</p>
  <p class="text-slate-400">Tertiary — 4.9:1 (AA pass)</p>
</div>

Common Mistakes

• Gray placeholder text that is too light (use slate-400 minimum)
• Light-colored text on colored backgrounds without checking contrast
• Using text-slate-300 on white backgrounds for 'subtle' text
• Not adjusting text colors for dark mode (some colors that work on white fail on dark)
• Colored links that do not have enough contrast against their background