调色枢 › 设计指南 › 如何检查颜色对比度（无障碍）

无障碍

如何检查颜色对比度（无障碍）

对比度是文字与背景之间的亮度差。差距太小，一部分人就读不清。下面讲怎样正确检查，以及那些数字到底要求什么。

⏱ 6 分钟阅读 · 设计指南
核心要点
  • WCAG 把对比度量化为 1:1（无）到 21:1（黑底白字）的比值
  • 正文 AA 需 ≥ 4.5:1；大号文字需 ≥ 3:1
  • AAA 更严：正文 7:1，大号文字 4.5:1
  • 别靠肉眼估——白底浅灰字的失败率远比看上去高
  • 对比度达标不等于无障碍——链接、图标和状态提示仍需要一个非颜色的辅助标记，照顾色盲用户

对比度比值是什么意思

WCAG 对比度是两种颜色相对亮度的比值，从 1:1（完全相同、看不见）到 21:1（纯黑配纯白）。它关乎亮度，不关乎色相——两种颜色可能看起来不同却依然不达标，因为它们的明暗太接近。

需要达到的阈值

WCAG AA（常见的法规/实务标准）：正文至少 4.5:1，大号文字（约 24px，或 18.66px 加粗）至少 3:1。AAA：正文 7:1，大号 4.5:1。UI 组件和图形（图标、输入框边框）相对相邻颜色需 3:1。

白底 4.5:1
白底不达标
AA 通过
不达标

怎么检查

别相信眼睛——感知对比并不可靠，尤其是浅灰和中间调的配色。把两个 HEX 值粘进对比度检查器，读出比值。检查你真实用到的组合：正文配背景、链接配背景、占位文字、以及图片或按钮上的文字。

如何修复不达标的配色

当一组不达标，改亮度而非色相——把文字调暗或把背景调亮，直到越过阈值。这样既保住品牌色的辨识度，又让它可读。对比度修复工具能自动完成：它把亮度调整到刚好达到 AA 或 AAA 所需的最小幅度。

常见问题

无障碍需要多大的对比度？

WCAG AA 下，正文至少 4.5:1，大号文字至少 3:1。更严的 AAA 级，正文需 7:1，大号文字需 4.5:1。

对比度取决于颜色还是亮度？

取决于亮度（luminance）。两种色相不同的颜色，若亮度太接近仍会不达标。这就是为什么白底浅灰字看着没问题却常常不达标。

配色对比度不达标怎么修？

调亮度而非色相：把文字调暗或背景调亮，直到比值越过 4.5:1（大号文字 3:1）。这样保住色相又变得可读。

检查并修复对比度

按 WCAG AA / AAA 检测任意文字/背景组合

打开对比度修复 →