无障碍设计
如何按照 WCAG 检查文字颜色对比度
测量前景与背景对比度，理解 AA 和 AAA 阈值，并在不靠猜测的情况下修复不合格文字。
发布于 更新于
可读性取决于前景色和背景色的组合，而不是其中某个颜色本身。WCAG 根据两者的相对亮度计算 1:1 到 21:1 的对比值。
记住关键阈值
- WCAG AA：普通文字 4.5:1，大号文字 3:1。
- WCAG AAA：普通文字 7:1，大号文字 4.5:1。
- 大号文字指至少 24px 的常规文字，或约 18.66px 的粗体文字。
把真实颜色组合放入 颜色对比度检查器，并测试默认、悬停、禁用、选中、已访问和焦点等全部重要状态。透明颜色必须先与最终背景合成，再进行测量。
产品界面可以建立一个小检查表：正文、弱化文字、链接、按钮文字、纯图标按钮、表单边框、焦点环、选中状态和深色模式。很多“看起来还行”的颜色，实际对比度会在这些位置失败。
修复不合格组合
优先调整明度并尽量保留原有色相：浅色背景上的文字应变深，深色背景上的文字应变浅。工具能给出接近原色的 AA 建议值，但仍需由设计者确认层级和品牌一致性。
纯 黑色 与 白色 能达到最高对比度，但正文并不总需要极限反差。近黑文字通常更柔和，同时也很容易通过 AA。
如果品牌色不合格，不必马上放弃色相。可以先尝试更深或更浅的相近色，再确认它是否仍能保持原来的品牌识别。
对比度不是唯一的无障碍要求。链接需要非颜色提示，焦点轮廓必须可见，状态还应包含文字或图标。可把这些原则应用到 HTML 与 CSS 文字颜色 中。