对比度：看得清比看起来淡更重要

先理解这个概念

WCAG 2.2 AA 对普通文本要求至少 4.5:1，大文本至少 3:1。大文本通常指至少 24 CSS px，或约 18.67 CSS px 的粗体。计算使用前景与背景的相对亮度，不能只看两个颜色是否不同。通过对比度只是可访问性的一部分。

对比度是在具体前景与背景之间计算的，不是某个灰色自身的属性。透明度、图片背景、渐变与覆盖层都会改变最终结果。视觉上“看起来差不多”的两种颜色，亮度差可能很小；更粗的文字能改善感受，却不能随意代替适用标准中的对比要求。

记住这三个原则

1. 01

   普通正文按 4.5:1 检查，阈值比较不要先四舍五入。

2. 02

   渐变、图片和半透明背景要检查实际最差区域。

3. 03

   错误状态搭配文字或图形，避免只靠红绿区分。

实际设计时，分三步做

1. STEP 01

   先判断检查对象是正文、较大文字、必要控件边界还是装饰，并使用对应规则；不要把所有元素都套同一个阈值。

2. STEP 02

   对真实渲染背景采样，特别是图片上的字和带透明度的提示。若背景不可控，考虑增加稳定底色。

3. STEP 03

   检查正常、悬停、选中和错误等状态。自动计算后再看真实内容与设备，避免只验证色板中未实际使用的组合。

一个容易理解的例子

次要信息可以不抢眼，但仍然需要可读。

适用边界与取舍

次要文字可以在位置、大小和字重上降低优先级，不必靠极浅颜色。装饰不需要抢占注意力，但必要状态和控件边界不能被误当装饰。