摘要：免费的在线颜色对比度检查器，验证 WCAG AA/AAA 无障碍标准，自动建议可达标颜色，实时预览效果，本地运行无需注册。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
下一步
使用指南
前景字与背景色对比不足时，用户看不清，也可能不满足 WCAG 对比度要求。本工具输入前景与背景色（取色器或十六进制），实时计算对比度比值，并对 AA/AAA × 普通文本/大文本四格给出通过或未通过——纯本地计算。本页不做「一键改色到达标」；不达标时请人工调深浅或加衬底后再测。预览区只是辅助目测，最终以比值与徽章为准。
1. 检查一对颜色
预览区用当前配色渲染示例文案，便于目测。改色后徽章会即时刷新，适合评审时现场试几组候选。把有争议的按钮色与次要文字色都测一遍，比只测品牌主色更有用。
- 用取色器或输入框设定前景色与背景色。
- 阅读中央对比度比值（如 4.52:1）。
- 查看四个徽章：AAA Normal、AAA Large、AA Normal、AA Large。
2. 阈值怎么记
正文与表单控件建议至少达到 AA。通过 AA 不等于通过品牌规范——有的团队要求正文接近 AAA。把阈值写进设计 token 说明，比口头约定更稳。
- AA 普通文本 ≥ 4.5:1；大文本 ≥ 3:1。
- AAA 普通文本 ≥ 7:1；大文本 ≥ 4.5:1。
- 大文本通常指约 18pt（或 14pt 粗体）及以上——以你方无障碍规范为准。
- 图标按钮若只有颜色区分状态，也要用对比度或额外非颜色线索。
3. 不达标时怎么改
固定品牌色时，优先改文字侧明度，或在文字后加实色/半透明衬底，而不是整页换品牌。把字号提到「大文本」档可放宽阈值，但不能拿来给正文小字开脱。渐变或图片背景请取文字实际背后的采样色再测，不要只测设计稿里的纯色色板。交互态（hover/focus）也要单独测一对颜色，默认态达标不代表焦点环或按下态可读。
4. 必须抽查的位置
禁用态「看起来淡」不等于可以不可读；若产品要求禁用仍可辨认标签，同样要过对比度。
- 按钮、链接、占位符、禁用态（禁用态也要可读或明确不可用）。
- 图表系列色与坐标轴说明。
- 设计 token 评审：主色、次要文字、边框上的字。
- 错误提示红字与浅红底的组合。
5. 和相邻工具
对比度通过不等于色弱可辨。重要状态请同时做色盲模拟，并保留非颜色线索（图标、文案、线型）。
- 调色与互转：颜色转换器。
- 找接近的 Tailwind 色：Tailwind 色查找。
- 背景氛围：CSS 渐变生成器（生成后再回本页测字色）。
- 色弱场景补充：色盲模拟工具。
6. 边界与评审用法
计算基于相对亮度对比度模型。本页一次测一对颜色，批量 token 请在设计系统层用脚本或表格回归。设计评审时投影本页，把有争议的按钮与次要文字现场测一遍，把比值记进纪要。图片上的字请对实际截图像素取色。本页不会自动改色，避免把「测过」误当成「已修好」。处理含个人信息或密钥的内容时，即使计算在本地完成，也要留意屏幕分享、录屏与下载文件的二次传播路径。
常见问题
不会。对比度是纯前端的明度运算，前景色与背景色只在本机参与计算，不会上传到任何服务器。
基于 WCAG 相对亮度对比度：AA 要求普通文本 ≥4.5:1、大文本 ≥3:1；AAA 要求普通文本 ≥7:1、大文本 ≥4.5:1。预览区只辅助目测，最终以比值与 AA/AAA × 普通/大文本四个徽章为准。
通常指约 18pt（或 14pt 粗体）及以上，具体以你方的无障碍规范为准。把字号提到大文本档可以放宽阈值，但不能拿来给正文小字开脱。
不会一键改色。固定品牌色时优先调文字侧明度，或在文字后加实色/半透明衬底；渐变与图片背景请对文字背后的实际像素取色再测；交互态（hover/focus）要单独测一对颜色——默认态达标不代表焦点环可读。
按钮、链接、占位符与禁用态（禁用也要可读或明确不可用）；图表系列色与坐标轴说明；设计 token 评审中的次要文字、边框上的字；错误提示红字配浅红底的组合。
不一定，达标只保证明度差。重要状态请再用色盲模拟工具核验，并保留图标、文案等非颜色线索；需要调色互转或找接近的 Tailwind 色时，可配合颜色转换器与 Tailwind 色查找工具。