Colors

---

name: Colors description: Build accessible color palettes with proper contrast ratios and semantic tokens. metadata: {"clawdbot":{"emoji":"🎨","requires":{},"os":["linux","darwin","win32"]}}

---

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.

Active
Inactive

✓ Active
✗ Inactive

Test designs in grayscale to verify information is still distinguishable.

Semantic Color Tokens

Three-layer architecture for maintainable palettes:

/* 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:

/* 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:

/* 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:

--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).