面向无障碍的颜色对比度，附检测器使用方法

为什么需要这样做

白色页面上的一行灰色文字，在你自己的显示器上可能显得很雅致，但在阳光下的手机上却难以辨认，对于视力低下或有色觉缺陷的读者更是如此。对比度正是这个问题中可以衡量的部分。《网页内容无障碍指南》（WCAG）把它变成一个数字，也就是对比度，并给出你可以在设计交付前检查的及格线。

本指南介绍如何用配色工具里的对比度检测器读懂这个数字，适用哪些阈值，以及为什么一个通过的比值并不是全部，尤其是当颜色本身承载含义的时候。

具体做法，使用该工具

配色工具有三个标签页：调色板、渐变和转换与对比度。对比度检测在第三个标签页里，在你的设备上运行。

1. 打开“转换与对比度”。 选择标题下方的这个标签页。
2. 输入两种颜色。 设置文字颜色和背景颜色。你可以在 HEX、RGB 或 HSL 字段中输入，另外两个会随之更新，因此从设计文件中复制的任何一种格式的值都可以使用。
3. 说明文字是否为大字号。 如果适用，请勾选大字号文本（18pt 及以上，或 14pt 粗体）。
4. 查看判定结果。 工具会显示对比度，以及两行结果，AA — 最低对比度和AAA — 增强对比度，每一行都标为通过或未通过。
5. 调整并分享。 改动其中一种颜色，观察判定随之更新。“Copy link to this result”按钮（在中文界面中仍显示为英文）会把设置保存在一个网址里，你可以发给同事。

如果你还在挑选颜色，请先在调色板标签页里用某种配色方案，比如互补色或邻近色，建立一个基础调色板，然后把打算使用的颜色组合带到对比度标签页检查。配色方案挑选的是看起来平衡的色相，而不是能一起清晰阅读的组合，所以文字组合一定要检查。

需要注意什么

阈值。 对于普通正文，WCAG 的 AA 级要求对比度至少为 4.5:1，AAA 级要求 7:1。文字达到 18pt 及以上，或者粗体 14pt 及以上，就算大字号。大字号文字在 AA 级只需要 3:1，在 AAA 级需要 4.5:1。对比度的范围从 1:1（两种颜色完全相同）到 21:1（黑底白字）。同样的 3:1 也是 WCAG 对界面中有意义部分设定的标准，比如输入框的边框，不过本检测器只比较你输入的那两种颜色。

差一点也是不通过。 4.4 的比值达不到 4.5 的标准，不要向上取整。如果品牌色只是勉强不及格，就把文字颜色加深一点，或者把背景颜色调浅一点，然后重新检查。

这个数字是怎么算出来的。 对比度比较的是两种颜色的相对亮度，也就是衡量每种颜色有多亮的指标；计算前要先把每种颜色从存储的 sRGB 值转换成线性光。这个转换有一个很小的分界点。本检测器使用 0.03928，也就是 WCAG 2.x 文本中印出的数值；较新的 sRGB 标准给出的是 0.04045。两者相差极小，比值只在很远的小数位才会出现分歧，但采用 WCAG 的数值能让本工具的结果与 WCAG 公布的数字保持一致。

在不同格式之间转换可能让某个通道相差 1。 HEX、RGB 和 HSL 使用 8 位数值，因此来回转换一次可能让某个通道偏移 1。这是舍入造成的，并非错误，除非你正好卡在及格线上，否则不会改变判定结果。

对于分类用色，对比度并不是全部。 图表、地图和状态徽标经常用几种不同的色相来区分类别，比如每根柱子或每条线一种颜色。两个亮度相近的色相，对比度比值会接近 1:1，即使它们在彩色显示器上看起来差别很大。这是因为公式只衡量亮度，不衡量色相。所以，对比度比值是判断类别能否被区分的错误测试。有色觉缺陷的人可能会把这样的两个色相看成同一种颜色，而在灰度显示或打印稿中，它们甚至会完全融合。请增加第二种提示：直接标注、不同的线型或标记形状，以及相邻类别之间明显的亮度差。检测器可以在亮度这一部分帮上忙，当两个相邻类别的颜色之间比值很低时给出提示，但它不能告诉你图例是否无障碍。

检测只覆盖你输入的两种颜色。 它不了解文字背后的照片、叠加层，也不了解设计的其余部分。

常见问题

正文需要多大的对比度？

要符合 WCAG AA，至少需要 4.5:1；要符合 AAA，需要 7:1。如果文字是大字号，即 18pt 及以上，或 14pt 及以上的粗体，那么 3:1 符合 AA，4.5:1 符合 AAA。请在工具中勾选大字号文本，让它应用正确的一组阈值。

为什么我觉得颜色没问题，检测器却说不通过？

你的屏幕、你的视力和房间的光线，都不等同于读者的情况。对比度比值是一个可重复的标准，不依赖于任何一块具体的屏幕。如果一组颜色未通过，请把这个数字当作事实并调整颜色，而不是依赖它在你显示器上的观感。

占位文字或禁用按钮也适用吗？

WCAG 对禁用的控件有豁免，但占位文字是真实的文字，仍然需要足够的对比度才能被读到。拿不准时就检查一下这组颜色，并且优先使用可见的标签，而不是只写在占位符里的说明。