设计 · 阅读约 3 分钟 · 2026年10月2日

颜色对比度与 WCAG：让文字清晰易读

4.5:1 的对比度意味着什么，哪些文字需要达到 AA 或 AAA，以及最常不达标的配色该如何快速修正。

白底上的浅灰色文字在设计稿里显得很雅致，但在阳光下的手机上、对视力退化的人或低视力人群来说却很难阅读。无障碍指南 WCAG 把“易读”变成了一个可以检查的数字。

对比度

对比度是一个从 1:1（相同颜色）到 21:1（白底黑字）的比值。它基于相对亮度，也就是每种颜色在人眼看来有多亮，其中绿色权重最大，蓝色最小。所以白底黄字几乎看不见，而白底蓝字很好读。

              普通文字   大号文字
AA（最低）     4.5:1      3:1
AAA（增强）    7:1        4.5:1

大号文字 = 至少 24px，或加粗 18.66px

AA 是大多数无障碍法规和政策引用的级别，应把它当作底线。长篇正文值得争取 AAA。按照 WCAG 2.1，承载信息的图标、输入框边框和焦点指示至少需要 3:1。

灰色的占位提示文字、橙色、黄色或浅绿色等鲜艳品牌色上的白字，以及叠在照片上的文字。差距可能非常小：白底上的 #777777 约为 4.48:1，略低于 AA，而 #767676 约为 4.54:1，刚好通过。

与其换色相，不如把文字或背景调暗一两档；亮度的小变化就能让比值大幅变化。鲜艳按钮上的标签要做大、加粗，或者改用深色文字代替白字。在照片上，给文字垫一层深色遮罩。

WCAG 还规定，颜色不能是传达信息的唯一方式。只用红色边框标出错误的表单字段，或只靠颜色区分线条的图表，会让色觉障碍人士无从分辨，而大约每 12 位男性中就有 1 位。请加上图标、文字标签、图案或不同的线型。

深色背景同样适用这些比值。纯黑上的纯白文字能达到 21:1，但可能显得刺眼，有些读者会觉得字像在发光；在很深的灰色上用浅灰色，依然能轻松达到 AA，长时间阅读也更舒服。两种主题都要检查，因为在浅色模式下合格的配色，颜色反转后常常不合格。

在照片或渐变上，每个字后面的背景都不一样。要用文字背后背景中最亮的部分来测量对比度，而不是平均值。在文字后面加一层半透明的深色遮罩或一条实色色带，效果就可以预期了。

WCAG 3 草案正在研究一种名为 APCA 的新对比度算法，它会更精确地考虑字号和字重。但它仍只是草案：如今的法律和审核依据的是 WCAG 2.1 和 2.2，所以需要达到的仍是 4.5:1 和 3:1 这两个门槛。

4Dev 的颜色对比度检查器可显示任意文字色与背景色的对比度，提供实时预览，并分别给出普通文字和大号文字在 AA 与 AAA 下是否达标。计算采用 WCAG 2 公式，在你的浏览器中完成。