Creating a Color Contrast System in Tailwind CSS

Why You Need a Contrast System

Ad-hoc color pairing leads to inconsistent contrast across pages. A contrast system defines which shade pairs are allowed, ensuring every text-on-background combination meets your accessibility target.

Defining Contrast Pairs

• Level 1 (highest contrast): slate-900 on white, white on slate-900 — for body text and headings
• Level 2 (strong): slate-700 on slate-50, slate-200 on slate-800 — for secondary text
• Level 3 (moderate): slate-500 on white, slate-400 on slate-900 — for captions and labels
• Level 4 (decorative): slate-300 on white — only for borders, dividers, non-essential elements

Implementation

<!-- Level 1: Primary content -->
<h1 class="text-slate-900 dark:text-white">Main Heading</h1>
<p class="text-slate-900 dark:text-slate-100">Important body text</p>

<!-- Level 2: Secondary content -->
<p class="text-slate-700 dark:text-slate-300">Supporting paragraph</p>

<!-- Level 3: Tertiary content -->
<span class="text-slate-500 dark:text-slate-400">Published 2 hours ago</span>

<!-- Level 4: Decorative -->
<hr class="border-slate-200 dark:border-slate-700" />

Applying to Brand Colors

/* Contrast system for brand color (blue) */
/* Text ON brand-colored background: */
/* brand-600 bg + white text = 5.4:1 ratio (AA pass) */
/* brand-100 bg + brand-900 text = 8.2:1 ratio (AAA pass) */

<div class="bg-blue-600 text-white p-4 rounded-lg">
  High contrast: white text on brand background
</div>
<div class="bg-blue-100 text-blue-900 p-4 rounded-lg">
  Tinted card: dark brand text on light brand background
</div>