taste-color

taste-color

颜色是界面中最能传达情绪的元素，也是 Agent 最容易滥用的元素。解决之道在于建立结构：小巧的调色板，配合严谨的使用规范。

1. 调色板架构（60-30-10）

完整的界面调色板恰好包含：

• 60% 中性色 — 用于表面和文本。统一偏暖或偏冷，保持同一色系。2–4 种表面颜色（背景、面板、凸起表面）+ 3 个文本层级（主要、次要、弱化）。
• 30% 结构色 — 用于边框、细线、分隔线：采用带色调的中性色，而不是彩色。
• 10% 强调色 — 一种用途明确的高饱和度颜色：主要 CTA、链接、激活状态、一组数据。如果存在第二种强调色，它必须有独立用途（例如，用于状态的成功绿），且覆盖率低于 2%。

每个视口中，超过三种有“实际意义”的颜色 = 页面没有明确传达的信息。强调色无处不在时，就无法再突出任何内容。

2. 构建色阶（OKLCH，而非 RGB）

• 使用 OKLCH 构建所有色阶（感知上均匀的亮度）。切勿盲目在十六进制颜色值之间插值。
• 中性色：9–11 个色阶（50–950），色度接近 0。强调色：9–11 个色阶，色相固定，色度从 50 的低值逐步升至 500–600 的满值，再在 900 处下降。
• 页面中使用最多的两个色值：强调色的 500–600 色阶（按钮）和中性色的 50–100 色阶（背景）。
• 技术栈支持时，在代码中转换为 OKLCH；否则使用十六进制值，但须基于 OKLCH 计算。

3. 对比度（WCAG 2.2 — 精确数值）

元素	最低比例
正文（常规文本）	4.5:1
大号文本（≥24px，或 ≥18.66px 粗体）	3:1
UI 组件（边框、图标、输入框边缘）	与相邻元素相比为 3:1
焦点指示器	与相邻元素相比为 3:1，至少 2px

• 切勿凭目测判断：发布前使用对比度函数（WCAG 相对亮度公式）或工具进行计算。
• “高级感”的低饱和风格不是降低对比度的借口：应降低背景的饱和度，而不是文本的。
• 强调色按钮上的文本：白色文本要求强调色的亮度对比比不高于约 4.6:1，须进行检查。浅色强调色搭配深色文本通常更合适（#FFD100 黄色 + 墨色文本 = 正确；黄色上的白色 = 错误）。
• 不透明度 ≤ 0.5 的占位文本仅用于装饰：占位标签不能是唯一标签（应使用浮动标签、可见标签）。

4. 语义映射（名称承载用途）

• --color-surface、--color-surface-raised、--color-text、--color-text-muted、--color-border、--color-accent、--color-success、--color-danger、--color-warning — 根据需要为每种颜色提供 3–4 个色阶（例如，--color-danger-bg、--color-danger-border、--color-danger-text）。
• 名称必须体现含义：使用 --color-danger-text，而不是 --color-red-700。
• danger/success/warning 仅用于状态，绝不用作装饰。
• 深色模式 = 重新映射语义（--color-surface 翻转），绝不能把另一套原始颜色散布到组件中。

5. 色盲安全（默认安全的组合）

• 切勿仅用红色和绿色编码信息。应添加形状、位置、图案或标签：✓ / ✕、↑/↓、实线/虚线。
• 蓝紫色是最安全的色相（对蓝色盲和绿色盲更友好）；橙色是中性色背景下最醒目的安全强调色。
• 数据可视化：使用色盲安全的分类色集（例如 Okabe-Ito），不要使用默认的彩虹色。

6. 检查清单（出现以下情况时，页面不合格……）

• 任意相邻的文本/背景组合对比度低于常规文本所需的 4.5:1。
• 每个视口中，承载含义的强调色超过一种。
• 使用了本可用纯色替代的渐变。
• 成功/失败仅用红色和绿色表示。
• 组件中出现了未使用设计令牌的原始十六进制颜色值。
• 黄色或浅色强调色上使用白色文本。
• “深色主题”实际上只是在深色背景上使用相同的颜色（必须重新计算对比度）。

一种强调色在每个视口中使用两次，是一种信号。同一种强调色无处不在，则只是噪声。