颜色对比

为什么

何时使用

如何做

1. 用对比工具查每文本/背景对
   - 浏览器 DevTools: 查元素 → Color → 点对比比
   - axe-core: CI 自动检查（抓大多违规）
   - WebAIM Contrast Checker: 贴 hex 值快速查
   - Stark 或 Contrast（Figma/Sketch 插件）: 设计工具中查

2. 理解 WCAG 阈值
   - 正常文本（< 18pt 或 < 14pt 粗）: 4.5:1 最低（AA）、7:1（AAA）
   - 大文本（>= 18pt 或 >= 14pt 粗）: 3:1 最低（AA）、4.5:1（AAA）
   - UI 组件（按钮、输入、图标）: 对背景 3:1
   - 禁用元素: 豁免（但确保看起来禁用非仅低对比）

3. 修低对比对
   - 深文本色（最常见修——#666 → #333）
   - 浅背景（白而非浅灰）
   - 增文本大小（从 4.5:1 移到 3:1 阈值）
   - 加边框或阴影分元素和背景

4. 查非文本元素
   - 图标按钮: 图标对背景须 3:1 对比
   - 表单字段边框: 边框须 3:1 对比
   - 图表和数据可视化: 每数据系列须可区分（非仅靠颜色）
   - 链接: 与非链接文本可区分（非仅靠颜色——下划线或粗细）

5. 真实世界条件测
   - 亮阳光下看页（或增屏幕亮度模拟）
   - 高对比模式看页（Windows: Alt+Shift+PrintScreen）
   - 色盲模拟器看页（Stark、Coblis）——不仅靠颜色

示例

// DevTools 中查对比
// 1. 查元素
// 2. Styles 面板点颜色色板
// 3. DevTools 显对比比和 AA、AAA 过/不过

// CSS: 修低对比文本
// 前: #999 on #fff = 2.85:1（不过 AA）
.muted-text { color: #999; }

// 后: #666 on #fff = 5.74:1（过 AA）
.muted-text { color: #666; }

// 或: #767676 on #fff = 4.54:1（刚过 AA——GitHub 灰）
.muted-text { color: #767676; }

// 链接: 不仅靠颜色
// 坏: 链接仅不同色，色盲用户不可区分
a { color: #0066cc; } /* 蓝，无下划线 */

// 好: 链接有下划线（或其他非颜色指示）
a { color: #0066cc; text-decoration: underline; }

// 图表: 不仅靠颜色区分系列
// 坏: 红绿线（红绿色盲不可区分）
<line stroke="red" />
<line stroke="green" />

// 好: 不同色 + 不同模式（实、虚）
<line stroke="red" stroke-dasharray="0" />
<line stroke="green" stroke-dasharray="4" />
// 或直接每线加标签

// CI: axe-core 自动查对比
test("无对比违规", async ({ page }) => {
  const results = await new AxeBuilder({ page })
    .withTags(["wcag2aa"])
    .analyze();
  const contrastIssues = results.violations.filter(
    v => v.id === "color-contrast"
  );
  expect(contrastIssues).toEqual([]);
});

常见问题

• ⚠用设计师选的灰（#999）做静音文本因"看起来对"——2.85:1 比不过 WCAG AA，但团队不查因校准监视器上看起来好。
• ⚠仅靠颜色区分链接和正文——8% 红绿色盲男不能分蓝链接和黑文本，链接对他们不可见。
• ⚠用红绿表错误和成功——最常见仅色编码，色盲用户最常见无障碍障碍（两者都见同棕）。
• ⚠设计工具默认白背景查对比，但应用有暗模式或彩色背景同文本色不过——对比须每主题查。

最佳实践

• ✓CI 中跑 axe-core 自动抓对比违规——查每文本/背景对违规坏构建，防最常见 a11y 问题发。
• ✓所有文本用 4.5:1 对比比（非仅 WCAG 最低）——额外余量考虑屏幕眩光、老化显示和用户读文本的真实世界条件。
• ✓永不仅靠颜色传意——颜色配文本标签、图标、模式或下划线，使不能区分颜色的用户保留意义。
• ✓每主题（亮、暗、高对比）查对比——亮模式过的文本色暗模式可不过，每主题须跑检查。