上周改一个电商详情页，运营说灰色按钮上的白字「看着有点虚」，设计稿标的是 #8C8C8C 底、#FFFFFF 字。我没急着调色，先把这组值丢进颜色对比度工具，出来 4.3:1——刚好卡在 WCAG AA 正文 4.5:1 的线下。就这一个数，省掉了我在设计软件里反复吸色、再翻亮度公式手算的十几分钟，也把「看着虚」变成了可复现的结论。
最快出结果的路径是什么？
打开页面就是两个色值输入框，一个填文字色，一个填背景色，支持 HEX、RGB 和取色器。填完立刻出对比度比值，下面直接标 AA 正文、AA 大字、AAA 正文、AAA 大字四档是否通过。
最短链路就三步：填文字色 → 填背景色 → 看评级。不需要注册，不需要先建项目，也没有「保存后再计算」的中间态。
有个细节值得说：它把「大字」单独列了一档。WCAG 里 18pt 常规或 14pt 加粗以上算大字，阈值降到 3:1。很多人只盯 4.5:1，结果把标题也按正文标准卡，白改一轮。
三个真实场景分别怎么用？
场景一：按钮文字不达标。 输入 #8C8C8C 底、#FFFFFF 字，得 4.3:1，AA 正文不通过。我把底色往深调，试到 #767676 时比值 4.54:1，刚过线；再试 #6B6B6B 到 5.1:1。最后选 #6B6B6B，留一点余量给不同屏幕的色偏。整个过程在工具里改一个值看一次结果，比在设计软件里导出再看快得多。
场景二：正文与浅色卡片背景。 详情页正文 #333333 放在 #F7F7F7 卡片上，工具给 11.6:1，AAA 正文都过。但同一张卡片上的辅助说明用了 #999999，只有 2.8:1，连 AA 大字都不到。这类「主文案达标、辅助文案翻车」的情况很常见，工具的价值是让你一次把一组配色全过一遍，而不是只验最显眼的那对。
场景三：状态标签。 绿色「已发货」标签 #2E7D32 底、白字，得 5.1:1 过 AA；橙色「待付款」#F57C00 底、白字只有 2.3:1，不通过。橙色底要么加深到 #E65100（4.5:1 左右），要么把文字改成深色。这里要注意，颜色对比度只算亮度比，不判断色盲可辨性——红绿标签对色弱用户仍可能混淆，得另配图标或文字。
什么时候别用它？
这工具算的是两色之间的静态对比度，以下几种情况它给不了答案：
- 背景是图片或渐变。 它只接受纯色值。文字压在照片上时，得取最亮和最暗两处分别验，或者干脆加半透明遮罩再验遮罩后的等效色。
- 动态主题与暗色模式。 一套配色在亮色下过 AA，切到暗色模式可能掉到 3:1 以下。工具不保存配色方案，暗色版得重新填一遍。
- 非文本元素。 图标、边框、焦点框的 3:1 要求（WCAG 1.4.11）它不单独提示，只能拿比值自己对照。
- 色觉障碍模拟。 前面说过，它不模拟红绿色盲视角，别把它当无障碍的全部。
还有一点要诚实讲：比值达标不等于观感舒服。4.5:1 是下限，不是目标。正文我一般会拉到 7:1 以上，按钮文字至少留 0.3 的余量，因为不同设备的 gamma 和亮度会让实际观感偏离计算值。
搭配哪些工具更顺手？
验完对比度，配色方案本身可以丢进 颜色对比度 的取色器里微调，它和设计软件之间靠 HEX 值来回贴，不需要装插件。如果还要批量核一整页的色对，建议先把所有文字色和背景色列成两列，逐行填进去看评级，比在设计稿里逐个点选快。改完的色值记得同步回设计系统，否则下一个人接手又会用回旧值。
一个灰色按钮的 4.3:1 到 7.1:1，改的是两个十六进制数，省下的是上线后无障碍扫描报错再返工的那一轮。