颜色对比度检查
按 WCAG 2.1 算前景色和背景色的对比度，判断是否达到 AA、AAA 门槛，并给出附近刚好达标的颜色。
对比度
2.64:1 不达标
这是一行 16px 的正文，用来看看小字是否清楚。
这是一行 24px 的大号文字
这是一行 19px 的粗体文字
图标、按钮描边这类非文字内容按 3:1 判断
逐项门槛
| 项目 | 门槛 | 结果 | 适用场景 |
|---|---|---|---|
| AA 正文 | 4.5:1 | 未达标 | 小于 24px 的普通文字，或小于 18.66px 的粗体 |
| AA 大号文字 | 3:1 | 未达标 | 不小于 24px 的文字，或不小于 18.66px 的粗体 |
| AAA 正文 | 7:1 | 未达标 | 增强级，长文、小字和低视力场景更稳 |
| AAA 大号文字 | 4.5:1 | 未达标 | 大号文字的增强级 |
| 图标与边框 | 3:1 | 未达标 | 按钮描边、输入框边框、图标、图表线条等非文字内容 |
怎么改到达标
只挪明度、尽量保住原来的色相和饱和度，取改动最小的方向。点一下就能套用到上面的输入框。
| 做法 | 新颜色 | 对比度 | 套用 |
|---|---|---|---|
| 文字色暗一点或亮一点，到 AA 正文 达标 | #70777F | 4.53:1 | |
| 文字色暗一点或亮一点，到 AAA 正文 达标 | #54595F | 7.07:1 | |
| 文字色暗一点或亮一点，到 AA 大号文字与图标 达标 | #8F969C | 3.00:1 | |
| 不动文字色，把背景调到达标 | #373737 | 4.51:1 |
比值是怎么算出来的
先把每个通道除以 255，按 0.03928 分档做线性化或幂函数变换，得到相对亮度；然后按人眼对红绿蓝的敏感度加权：0.2126 R + 0.7152 G + 0.0722 B。对比度就是「亮的一方亮度加 0.05」除以「暗的一方亮度加 0.05」。
因为公式里的亮暗取的是大小关系，所以谁当文字、谁当背景不影响结果。分母里的 0.05 是为了避免纯黑除以纯黑，也让低亮度区间的差别不至于被放大得离谱。两个数相除的结果从 1（同色）到 21（纯黑配纯白）。
三档门槛分别对应什么
4.5:1 是普通正文的 AA 线，也是绝大多数项目的硬指标；3:1 是大号文字（不小于 24px，或粗体不小于 18.66px）和界面元素的门槛；7:1 是正文的 AAA 线，长文、小字和视力不佳的用户更需要它。AAA 大号文字是 4.5:1。
为什么大号文字可以放宽：笔画更粗、更少的细节被糊掉，同样的对比度下更容易辨认。所以标题用 3:1 就够了，但同样颜色拿去做 14px 正文就不合格。
常见的翻车配色
白底上的纯黄（#FFD400）只有 1.43:1，几乎看不清；白字配品牌蓝要看具体蓝，#1A73E8 是 4.51:1，刚好压线通过，再亮一点就不行了；灰字是最容易出问题的，白色背景上的灰要深到 #767676 才是 4.54:1。
另外注意：正文达标不代表彩色按钮上的白字也达标，按钮文字要单独算；半透明遮罩、图片上的文字还会受底图影响，无法用这个公式覆盖，最好加一层纯色底或描边。
达标不等于好看
对比度只是底线，不是设计目标。把文字一路加深虽然能过 AAA，但会让层次感消失，页面看起来像一片黑。更常见的做法是：正文用高对比度，次要说明用略低一档的颜色但保证不低于 4.5，禁用态或占位符这类「本来就不该太显眼」的文字才允许放低到 3 左右，并且配合下划线、图标等非颜色的提示。