本页面借助 AI 辅助翻译。英文原文为权威版本。
对比度是易读性的基石。一个字形即便绘制精美、间距宽裕、字号舒适，只要不能与背景清晰分离，仍然会失败。2005 年，我们能说的不过是“浅色底配深色字，两者之间差异要足够大”。如今，对比度可以测量、可以测试，并已在许多司法辖区被写入法律——而这套测量方法本身也成了严肃研究的对象。
WCAG 2.x 对比度模型
《Web 内容无障碍指南》（WCAG）2.x 将对比度定义为两种颜色相对亮度的比值，范围从 1:1（完全相同）到 21:1（纯黑对纯白）。有三条成功标准运用了这一比值：
- 1.4.3 对比度（最低要求），AA 级——正文文本必须达到 4.5:1；大号文本（约 24 像素，或 19 像素粗体）可放宽至 3:1。
- 1.4.6 对比度（增强），AAA 级——正文文本 7:1，大号文本 4.5:1，面向中度低视力的读者。
- 1.4.11 非文本对比度，AA 级——界面组件与有意义的图形需达到 3:1：输入框边框、焦点指示器、图标、图表元素。
公式的不足之处
WCAG 2.x 的公式是一种物理度量，而非感知度量，其局限如今已由工作组自身充分记录。该比值将明暗极性视为对称：黑底白字与白底黑字得分完全相同，尽管人眼对两者的体验并不相同。它对字重与字号的处理只靠一个粗糙的“大号文本”阈值，尽管在相同比值下，16 像素的纤细轻字重字体与同尺寸的粗体读起来大不相同。而在色域的暗端附近，该公式可能放行人眼判定为偏弱的颜色组合，同时否决实际读来尚可的组合。
APCA 研究方向
面向 WCAG 3.0 的草案工作包含一个候选替代方案——可及感知对比度算法（Accessible Perceptual Contrast Algorithm，APCA），由 W3C 的视觉对比度研究发展而来。它与 2.x 模型有三点重要不同：它基于感知，而非单纯基于亮度；它感知极性，对暗底亮字与亮底暗字分别打分；其阈值随字号与字重缩放，因此纤细的发丝级字体要接受比结实的正文字体更严格的标准。
APCA 目前仍是草案方向，而非合规标准。当下务实的立场是：符合 WCAG 2.x，同时把 APCA 的思考方式——字重与字号重要、极性重要——作为叠加其上的设计判断。
对比度并非越高越好
人们很容易把对比度当成一个应当拧到最大的旋钮。对许多低视力读者来说，最大对比度确实有帮助；但对一个不容忽视的少数群体来说，它反而有害。极高的对比度——尤其是纯黑底上的纯白文字——会产生光晕（halation），即字形周围的发光或模糊，对散光或光敏感的读者尤为明显。一些有阅读障碍或视觉压力的读者反映，生硬的白底黑字令人不适，他们更偏好略微柔化的底色，例如米白表面上的近黑文字。
这里的教训不是把对比度降到最低要求以下，而是：对比度要求界定的是下限，好的排版在这条下限之上的区间内工作，而不必冲向上限。近黑色（如极深的灰）配暖调米白可以轻松通过 AAA，读起来也比 #000 配 #FFF 更平和。更好的做法是让读者自己选择：prefers-contrast 媒体查询会报告用户是否已向操作系统请求更高（或更低）的对比度，样式表可以据此加深文字颜色、加粗边框、去除装饰性的半透明效果。在 Windows 上，强制颜色模式（forced-colors）更进一步，直接替换为用户自己的调色板；设计应当容纳它，而不是与之对抗。
切勿仅凭色相传达含义
大约十二分之一的男性以及比例小得多的女性存在某种形式的色觉缺陷，最常见的是难以区分红与绿。WCAG 1.4.1（色彩的使用）正是为他们而设：色彩可以强化含义，但绝不能独自承载含义。仅凭色相与正文区分的链接对许多读者而言形同隐形——请为它加上下划线。仅用红色边框表示的错误状态，还需要图标或文字信息。仅靠色相区分数据系列的图表，需要标签、图案或直接标注。
这是一条穿上新衣的古老印刷原则。二十世纪的信息设计师深知，复印之后依然清晰的地图才是更强的地图。设计时不妨假设你的页面可能以灰度呈现，因为对某些读者来说，事实正是如此。
本章为何是新增内容
这些指南第一版撰写之时，WCAG 2.0 尚未发布；没有可引用的数值化对比度要求，没有可供测试的浏览器工具，也没有能让读者表达对比度偏好的媒体查询。此后二十年间诞生了 4.5:1 标准及其在法律上的采纳、针对其公式的一系列批评，以及正在 WCAG 3.0 草案中成形的感知型继任者。对比度从品味走向了测量——继而有益地走向一场关于测量本身应当如何定义的辩论。
CSS 实现
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}建议
- 将 WCAG 1.4.3（正文 4.5:1）作为绝对下限；当受众偏向年长或低视力人群时，以 1.4.6（7:1）为目标。
- 落实 1.4.11：焦点指示器、输入框边框和有意义的图标相对其周边环境需达到 3:1。
- 对纤细、轻字重的字体，评判应严于比值本身所示；字重与字号会改变有效对比度。
- 长篇阅读避免纯黑配纯白；极深的灰配柔和的米白可以减轻光晕而不牺牲合规性。
- 绝不让色相独自承载含义——为链接加下划线、为状态加标签、为图表加标注。
- 支持
prefers-contrast，并容纳强制颜色模式而非将其覆盖。 - 关注 WCAG 3.0 草案中的 APCA 工作，但当下仍以 2.x 为合规标准。