Colors

Build accessible color palettes with proper contrast ratios and semantic tokens.

Contrast Ratios (WCAG)

Level	Normal Text	Large Text (≥18pt or ≥14pt bold)	UI Components
AA (minimum)	≥ 4.5:1	≥ 3:1	≥ 3:1
AAA (enhanced)	≥ 7:1	≥ 4.5:1	—

Critical thresholds on white background:

• #767676 → 4.54:1 ✅ barely passes
• #777777 → 4.47:1 ❌ fails (cannot round up)
• #757575 → 4.6:1 ✅ safe minimum gray

Pure colors on white:

• Red #FF0000 → 4:1 ❌ fails for normal text
• Green #00FF00 → 1.4:1 ❌ always fails (never use for text)
• Blue #0000FF → 8.6:1 ✅ passes AAA

Color-Only Information

Never rely on color alone to convey meaning. 8% of men have color vision deficiency.

html

<!-- ❌ Bad: only color differentiates states -->
<span class="text-green-500">Active</span>
<span class="text-red-500">Inactive</span>

<!-- ✅ Good: icon + text + color -->
<span class="text-green-500">✓ Active</span>
<span class="text-red-500">✗ Inactive</span>

Test designs in grayscale to verify information is still distinguishable.

Semantic Color Tokens

Three-layer architecture for maintainable palettes:

css

/* Layer 1: Primitives (raw values) */
--blue-500: #3B82F6;
--gray-900: #111827;

/* Layer 2: Semantic (roles) */
--color-primary: var(--blue-500);
--color-text: var(--gray-900);
--color-error: var(--red-500);

/* Layer 3: Component (specific use) */
--btn-primary-bg: var(--color-primary);
--input-border-error: var(--color-error);

Name tokens by function, not appearance: text-primary not text-blue.

Dark Mode

Create depth with luminosity, not shadows:

css

/* Light mode uses shadows for depth */
/* Dark mode uses surface brightness */
--surface-0: hsl(220 15% 8%);   /* page background */
--surface-1: hsl(220 15% 12%);  /* card */
--surface-2: hsl(220 15% 16%);  /* elevated element */
--surface-3: hsl(220 15% 20%);  /* modal */

Avoid pure black #000 and pure white #FFF as backgrounds. Use #0a0a0a and #fafafa to reduce eye strain.

Neutral Grays

Add a subtle tint of your primary color to grays for cohesion:

css

/* Instead of pure gray */
--gray-100: hsl(220 10% 96%);  /* slight blue tint */
--gray-500: hsl(220 10% 46%);
--gray-900: hsl(220 10% 10%);

This creates a more polished, intentional palette.

HSL for Variations

HSL makes generating consistent color scales trivial:

css

--primary-100: hsl(220 90% 95%);
--primary-300: hsl(220 90% 75%);
--primary-500: hsl(220 90% 55%);
--primary-700: hsl(220 90% 35%);
--primary-900: hsl(220 90% 15%);

Same hue and saturation, only lightness changes.

Balance Rule

60-30-10 distribution:

• 60% dominant (backgrounds, containers)
• 30% secondary (cards, sections)
• 10% accent (CTAs, highlights)

Limit palette to 3-5 colors plus neutrals. More creates visual noise.

Common Mistakes

• text-gray-400 or lighter on white background typically fails contrast
• Primary/accent colors for body text cause eye fatigue—use for headings and CTAs only
• Hover states that only change opacity may fail contrast—change hue or lightness
• Purple-to-blue gradients are an AI cliché—choose intentional combinations
• Testing only light mode—dark mode often reveals contrast issues
• Red/green as only differentiator—use icons or text labels alongside

Safe Combinations

Sector	Primary	Secondary	Why
Fintech	Navy #00246B	Light Blue #CADCFC	Trust + clarity
Healthcare	Light Blue #89ABE3	White	Calm + clean
E-commerce	Red #F96167	Yellow #F9E795	Urgency + optimism

Avoid: red + green (colorblindness), adjacent hues (blue + purple), yellow + white (no contrast).