SEO 百科

对比度

本页目录

对比度

对比度 指文字或图形与背景之间的亮度比值，比值过低时低视力用户读不出来[1]。它是一条可测量的无障碍要求，也直接影响页面上小号字与灰色文字的可读性。

WCAG 给的三个门槛

1.4.3 最小对比度（AA）   普通文字 4.5:1，大文字 3:1
1.4.6 增强对比度（AAA）  普通文字 7:1，大文字 4.5:1
1.4.11 非文本对比度（AA） 界面组件与图形对象 3:1

大文字的判定线是 18pt，或 14pt 加粗[1]。界面组件包括表单控件的边框、焦点指示与图标，纯装饰的图形不在这条要求内[2]。

测量办法

开发者工具里的颜色选取器会直接给出比值与通过等级，改一个色值就能重算[3]。在线比对工具同样按这四个数字判。深色模式要单独测一遍，浅底翻深底时文字色与背景色不是简单互换，边框与分割线常在深色下失去对比[4]。

常见失分位置

第一种是灰字配白底，正文用 #999 一类颜色，比值不到 3:1。第二种是按钮文字与按钮底色同色系，看着协调但读不清。第三种是只用颜色表达状态，红绿之外没有文字或图标，色觉障碍用户分不出来[1]。第四种是图片上的文字压进复杂背景，遮罩没做就发帖[2]。

与搜索的关系

搜索结果里的文字由引擎渲染，站长控制不了那部分颜色。页面内的对比度不进入收录判断，但它影响可读性与转化：读不清的按钮和表格，点击率与停留都会掉[5]。

附录

参见

参考资料

官方（境外）

  1. 《Color contrast》，MDN Web 文档。
  2. 《Understanding SC 1.4.3 Contrast (Minimum)》，W3C WAI。
  3. 《使用颜色选取器测试文本颜色对比度》，Microsoft Edge 文档。
  4. 《检查深色主题和浅色主题的对比度问题》，Microsoft Edge 文档。
  5. 《创建实用、可靠、以用户为中心的内容》，Google 搜索中心。

外部链接