色彩对比度与无障碍配色

这个比值实际在测什么

对比度比较的是两种颜色的相对亮度——粗略地说，就是各自发出多少光——刻度从相同颜色的 1:1 到白底黑字的 21:1。亮度不是各通道的平均值：绿色的贡献远大于红色，红色又远大于蓝色，因为人眼在光谱中段最敏感。这一加权正是白底亮黄色文字严重不合格、而同样的黄色放在黑底上却轻松通过的原因。

由此带来的结果是：色相几乎不起作用，明度才是主导。两个明度相同、鲜艳且明显不同的色相，按这套标准几乎没有对比度——而这恰恰是设计师对不合格分数最感意外的场景。若某个搭配不合格，改明度能解决；改色相通常不能。

阈值，以及适用哪一条

WCAG 要求正文 4.5:1、大号文字 3:1，这里的「大」约指 24px，加粗时为 19px。这是 AA 级；AAA 级则提高到 7:1 和 4.5:1。大号文字之所以有宽限，是因为更粗的笔画覆盖更多像素，在较低对比度下仍可辨读——这是对字形重量的让步，不是可钻的空子。

非文本元素有一条常被忽略的独立规则：界面控件和承载含义的图形，相对其相邻内容需要 3:1。这涵盖输入框边框、聚焦环、图表中的柱条，以及本身传达含义的图标。最常见的违规者是占位文字和禁用状态的控件，常以「本来就是有意显得淡」为由，远低于任何阈值。

通过比值不等于可读

比值对字体一无所知。同样是 4.6:1 的配色，在 16px 常规字重下很舒适，在 12px 细字重下却很吃力，因为细笔画覆盖的像素更少、被抗锯齿削去的也更多。达到阈值是下限而非目标，正文通常应留出余量再超过它。

比值也不知道文字背后是什么。压在照片、渐变或视频上的文字，每个区域的对比度都不同，针对某一个取样像素算出的数字，对其余部分毫无意义。这类情况需要一层遮罩、一块实色面板或文字阴影——用来**保证**一个已知背景，而不是指望有一个。

色觉障碍会改变哪些搭配可用

大约每十二名男性中就有一人存在某种形式的色觉障碍，最常见的是难以区分红与绿。对比度由明度主导，因此在这方面表现尚可——但仅靠色相承载的信息就不行了。红绿两色的状态圆点、图例只有颜色的图表、不加下划线只靠颜色与正文区分的链接：每一种对相当一部分读者都是不可见的。

由此得出的规则很简单：绝不让颜色成为唯一的通道。同时加上形状、图标、文字标签、纹样，或明度差异。用常见色觉障碍的模拟来检查设计花不了多少时间，而它往往能抓出的，正是自动对比度检查器毫无怨言放行的那些图表和状态指示。

构建经得起考验的配色

最可靠的做法是按明度阶梯来设计，而不是一个个挑颜色。固定一组明度台阶，让每个色相在每一阶都生成一次，搭配就变得可预测：阶梯上相隔足够远的两阶，无论色相如何都会通过。感知均匀的色彩空间比 HSL 更适合这件事——HSL 的明度并非感知均匀，两个明度值相同的 HSL 颜色，看起来的亮度可能天差地别。

一份可用的检查清单：

• 正文 4.5:1，大号文字 3:1，界面边框与承载含义的图标 3:1。
• 修复不合格时改明度，而不是改色相。
• 检查占位、禁用与聚焦状态——它们最常不合格。
• 绝不把信息只编码在色相里；补上形状、标签或明度差。
• 两种主题都要测：浅色模式下通过的配色，反转后可能不合格。