WCAG 对比度基础

可读的 UI 不只靠审美——文字与背景之间的 对比度 可以量化。

对比度比值

WCAG 将对比度定义为 1:1（相同）到 21:1（黑 on 白）的比值。比值越高，对低视力用户、强光环境等越友好。

工具根据前景与背景的相对亮度按标准公式计算。不要凭肉眼判断浅灰字在 tinted 卡片上是否够用。

AA 与 AAA 目标

正常字号 文本（常规小于 18pt / 粗体小于 14pt）常见下限：

级别	最低比值
WCAG AA	4.5:1
WCAG AAA	7:1

大字号 AA 阈值更低（3:1）。装饰性图标可能豁免，但 可交互标签 不行。

多数产品以 AA 为默认；正文追求 AAA 理想，彩色营销背景上未必总能达到。

背景很关键

蓝色按钮上的文字应对 按钮填充色 达标，而不是对按钮后面的页面。半透明层会与底层合成——要在最差背景（如壁纸、照片）上检查。

success、warning、danger 等浅色底配白字常失败。应加深底色或改用深色字。

不要只靠颜色

红绿状态点对色觉障碍用户不友好。颜色应配合图标、文案或纹理。对比度工具不能替代 冗余编码。

测试流程

1. 从主题取前景与背景令牌
2. 在转换器或设计插件中测量对比度
3. 失败时优先调明度而非色相——副作用通常更小
4. 重新测 hover/focus——它们是独立配对

要点

交付文字配色时 记录对比度比值。上线后再改代价高；把检查写进令牌评审。