颜色对比度检测：WCAG 无障碍

文字在背景上不够清晰、按钮点击区域不显眼、色盲用户看不清内容——这些是无障碍设计的问题。颜色对比度检测确保网站对所有人可读。本文详解 WCAG 标准和检测工具。

什么是 WCAG？

WCAG（Web Content Accessibility Guidelines）是 W3C 制定的 Web 内容无障碍指南，定义网站无障碍标准。

WCAG 2.1 标准

级别	正文对比度	大文字对比度
AA	≥ 4.5:1	≥ 3:1
AAA	≥ 7:1	≥ 4.5:1

大文字定义

≥ 18pt（24px）
或 ≥ 14pt（18.66px）加粗

对比度计算

对比度 = (L1 + 0.05) / (L2 + 0.05)

L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。

52tool 对比度检查器

工具地址：对比度检查

功能

输入前景色 + 背景色
计算对比度
显示 AA/AAA 是否通过
大文字和小文字分别评估
色盲模拟
浏览器端处理

实战 1：检测文字对比度

输入：

前景色：#333333
背景色：#FFFFFF

输出：

对比度：12.6:1
小文字 AA：通过
小文字 AAA：通过
大文字 AA：通过
大文字 AAA：通过

实战 2：检测不合格颜色

输入：

前景色：#999999
背景色：#FFFFFF

输出：

对比度：2.85:1
小文字 AA：未通过
小文字 AAA：未通过
大文字 AA：未通过
大文字 AAA：未通过

灰色文字在白底上对比度不足。

实战 3：色盲模拟

前景色：#FF0000（红）
背景色：#00FF00（绿）
对比度：2.9:1

对正常视觉对比度尚可，但红绿色盲无法区分。

工具模拟色盲视图，确认色盲友好。

对比度等级详解

1.0:1 - 3.0:1

极差，几乎不可读。仅用于装饰元素。

3.0:1 - 4.5:1

差。大文字勉强可读，小文字不行。WCAG AA 大文字最低标准。

4.5:1 - 7.0:1

中等。小文字勉强可读。WCAG AA 标准通过，AAA 不通过。

7.0:1 - 21.0:1

良好。所有情况可读。WCAG AAA 通过。

21:1

最高（黑 vs 白）。极致可读。

常见颜色组合对比度

通过 AAA（≥ 7:1）

前景	背景	对比度
#000000 黑	#FFFFFF 白	21.0:1
#333333	#FFFFFF	12.6:1
#FFFFFF	#2C3E50	11.5:1
#1A1A1A	#F5F5F5	12.6:1

通过 AA 但不 AAA（4.5-7:1）

前景	背景	对比度
#FFFFFF	#3498DB	4.5:1
#FFFFFF	#E74C3C	4.83:1
#555555	#FFFFFF	7.5:1

不通过 AA（< 4.5:1）

前景	背景	对比度
#999999	#FFFFFF	2.85:1
#FFFFFF	#F1C40F 黄	1.65:1
#3498DB	#FFFFFF	3.6:1
#888888	#FFFFFF	3.5:1

各类元素对比度要求

1. 正文文字

AA：≥ 4.5:1
AAA：≥ 7:1

2. 大文字（≥ 18pt 或 ≥ 14pt 加粗）

AA：≥ 3:1
AAA：≥ 4.5:1

3. UI 组件

按钮、表单边框、图标：

AA：≥ 3:1

4. 焦点指示

键盘导航时的边框：

AA：≥ 3:1

5. 非文字内容

装饰图标、分隔线：

无强制要求

6. 链接

与正文同色：≥ 3:1（与周围文字区分）
与正文不同色：与背景对比度 ≥ 4.5:1
hover 状态：≥ 3:1（与原色对比）

色盲友好设计

色盲类型

红绿色盲（最常见，约 8% 男性）
蓝黄色盲（罕见）
全色盲（极少）

色盲友好原则

#### 1. 不只用颜色传递信息

错误：红色框表示错误，绿色框表示成功

正确：红色框 + "错误" 文字，绿色框 + "成功" 文字

#### 2. 用形状或图标辅助

错误：❌ 红色 X
成功：✓ 绿色勾
警告：⚠ 黄色三角

#### 3. 用纹理或图案

图表中不同系列用不同纹理（实线、虚线、点线）而非纯色。

#### 4. 避免红绿组合

红绿是色盲最难区分。用蓝橙代替。

工具模拟色盲

52tool 对比度检查器支持色盲模拟：

红色盲
绿色盲
蓝色盲
全色盲

模拟查看设计是否可区分。

实战场景

场景 1：网页正文

文字：#333333
背景：#FFFFFF
对比度：12.6:1 ✓ AAA

场景 2：按钮文字

按钮背景：#3498DB
按钮文字：#FFFFFF
对比度：4.5:1 ✓ AA

场景 3：错误提示

错误文字：#E74C3C
背景：#FFFFFF
对比度：4.83:1 ✓ AA

但建议加图标 ❌，不只靠颜色。

场景 4：链接

正文：#333333
链接：#0066CC
对比度（链接 vs 正文）：5.4:1 ✓ AA

场景 5：暗色模式

文字：#FFFFFF
背景：#1A1A1A
对比度：16.1:1 ✓ AAA

场景 6：表单边框

边框：#888888
背景：#FFFFFF
对比度：3.5:1 ✗ 不达 AA

加粗边框或加深颜色到 #555555（7.5:1）。

场景 7：禁用状态

禁用文字：#999999
背景：#FFFFFF
对比度：2.85:1 ✗ 不达 AA

禁用状态可豁免对比度要求（WCAG 1.4.3 例外）。

场景 8：图表颜色

系列 1：#3498DB 蓝
系列 2：#E74C3C 红

红绿色盲难区分。改为：

系列 1：#3498DB 蓝
系列 2：#F39C12 橙

蓝橙组合色盲可区分。

编程实现

JavaScript

function luminance(r, g, b) {
  const a = [r, g, b].map(v => {
    v /= 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  });
  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

function contrast(rgb1, rgb2) {
  const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
  const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
  const brightest = Math.max(lum1, lum2);
  const darkest = Math.min(lum1, lum2);
  return (brightest + 0.05) / (darkest + 0.05);
}

// 示例
const text = [51, 51, 51];  // #333
const bg = [255, 255, 255];  // #FFF
console.log(contrast(text, bg));  // 12.6

CSS 强制对比度

@media (prefers-contrast: high) {
  body {
    color: black;
    background: white;
  }
}

用户系统设置高对比度时，网站强制用最高对比度。

检测工具

在线工具

52tool 对比度检查器
WebAIM Contrast Checker
Contrast Ratio
WCAG Color Contrast Checker

浏览器扩展

WCAG Contrast Checker
Color Contrast Analyzer
Stark（设计工具集成）

开发工具

Chrome DevTools：颜色选择器显示对比度
axe DevTools：完整无障碍检测
Lighthouse：综合评分

设计工具

Figma：Stark 插件
Sketch：Contrast 插件
Adobe XD：Color Contrast plugin

进阶技巧

技巧 1：暗色模式

暗色模式对比度：

浅文字 #EEEEEE
深背景 #1A1A1A
对比度：16.1:1

技巧 2：渐变背景

渐变背景对比度计算复杂，按渐变最差位置评估：

渐变：#3498DB → #2ECC71
最差位置取最深颜色评估

技巧 3：半透明覆盖

文字 #333333
背景 #FFFFFF
覆盖 rgba(0,0,0,0.5)
等效背景：#808080
对比度：4.5:1

技巧 4：响应式对比度

@media (max-width: 768px) {
  body { color: #000; }  /* 移动端提高对比度 */
}
@media (min-width: 769px) {
  body { color: #333; }
}

技巧 5：CSS 变量管理

:root {
  --text-primary: #333;
  --text-secondary: #666;
  --bg-primary: #fff;
  --bg-secondary: #f5f5f5;
}

集中管理，便于整体调整。

常见问题

Q: 对比度 4.5:1 怎么算？

A: (L1 + 0.05) / (L2 + 0.05) = 4.5，L 是相对亮度。用工具算最快。

Q: 暗色模式还要满足对比度吗？

A: 要。暗色模式同样需要 ≥ 4.5:1。

Q: 装饰元素要满足对比度吗？

A: 不强制。装饰图标、分隔线等非信息内容豁免。

Q: 占位符要满足对比度吗？

A: 要。AA 要求 ≥ 4.5:1，但允许低于正文（建议 ≥ 3:1）。

Q: 渐变背景怎么算对比度？

A: 取渐变中对比度最低的位置评估。如果最低 < 4.5:1 则不达标。

Q: 工具会泄露我的颜色吗？

A: 52tool 对比度检查在浏览器端运行，颜色值不上传服务器。

常见问题解答

Q: 怎么检测颜色对比度？

A: 1) 打开 52tool 对比度检查；2) 输入前景色和背景色；3) 查看对比度数值和 AA/AAA 是否通过。

Q: WCAG AA 和 AAA 区别？

A: AA 是基本标准（4.5:1），AAA 是最高标准（7:1）。商业网站通常满足 AA，政府/医疗网站要求 AAA。

Q: 文字颜色 #333 在白背景上够吗？

A: 够。对比度 12.6:1，远超 AAA 标准（7:1）。

Q: 红色文字在白背景上够吗？

A: 看红的具体值。#FF0000 对比度 4.0:1，不达 AA。#CC0000 对比度 5.9:1，达 AA。

Q: 怎么让色盲用户区分信息？

A: 1) 不只用颜色传递信息（加文字/图标）；2) 用形状/纹理辅助；3) 避免红绿组合；4) 用蓝橙代替。

Q: 渐变背景对比度怎么算？

A: 取渐变中对比度最低的位置评估。或简化为渐变两端分别评估，取最差值。

总结

颜色对比度是无障碍设计的基础：

检测 → 52tool 对比度检查
AA 标准 → 4.5:1（小文字）、3:1（大文字）
AAA 标准 → 7:1（小文字）、4.5:1（大文字）
色盲友好 → 不只用颜色传递信息

记住：4.5:1 是底线，不只靠颜色传达信息，暗色模式也要满足对比度。