Colors色彩调色板

Contrast Ratios (WCAG)

Critical thresholds on white background:

• - #767676 → 4.54:1 ✅ barely passes
• INLINECODE1 → 4.47:1 ❌ fails (cannot round up)
• INLINECODE2 → 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.

CODEBLOCK0

Test designs in grayscale to verify information is still distinguishable.

Semantic Color Tokens

Three-layer architecture for maintainable palettes:

CODEBLOCK1

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

Dark Mode

Create depth with luminosity, not shadows:

CODEBLOCK2

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:

CODEBLOCK3

This creates a more polished, intentional palette.

HSL for Variations

HSL makes generating consistent color scales trivial:

CODEBLOCK4

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

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