Colors
## 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).
标签
skill
ai
