对比度检测
检测前景色与背景色的可读性，输出 WCAG 对比度结果。
查看页面颜色知识
AA / AAA 对比度是什么意思
AA 和 AAA 并不是抽象的规范名词，它们直接关系到网页文字是否看得清、按钮是否足够明确，以及颜色方案是否真的可用。
发布时间：2026-04-30 · 最近更新：2026-04-30 · 阅读时长：5 分钟
先看结论
如果你只想先抓重点，可以先看这几条。
- AA 和 AAA 是 WCAG 可访问性标准里的对比度等级。
- 正文、说明文字和按钮文字最应该优先检查对比度。
- 视觉上高级的浅色组合，往往正是最容易不通过 AA 的组合。
适合搭配使用的工具
读完概念后，直接回到这些工具页做实际转换和校对会更高效。
AA / AAA 的核心含义
WCAG 是网页可访问性相关标准，其中颜色对比度是非常常见的一项。AA 可以理解为常规产品页面里比较普遍、也更现实的通过线，AAA 则更严格，适合追求更高可读性的场景。
当我们说某一组前景色和背景色通过 AA 或 AAA，本质上是在说这组颜色的明暗差异足够大，用户阅读起来不那么费力。
哪些地方最容易踩对比度问题
正文、小字说明、二级按钮、标签、浅背景上的弱提示文字，是最常见的风险区域。因为这些地方往往会为了“看起来轻一点”而把颜色做得过浅，最后导致信息不可读。
另一个典型问题是品牌色本身很亮，例如亮黄、浅青、浅粉，这些颜色单独看很漂亮，但直接拿来放白字、做按钮或做正文强调时，往往会不够清晰。
- 正文和说明文字：优先保证通过 AA。
- 按钮文字：不仅要通过，还要足够醒目。
- 弱提示色：不要为了“柔和”而牺牲可读性。
实际项目里该怎么落地
最实用的方法，是先确定品牌色和中性色，再把正文、弱文字、边框、按钮、状态色分别做成固定 token，然后用对比度工具逐组检查。
如果某个颜色组合不通过，不一定非要推翻整套配色。很多时候只要把文字再深一点、背景再浅一点，或者把按钮主色换到更深一档，就能快速修正。
相关工具
这些工具可以把上面的规则直接落到颜色转换、配色和检查流程里。
常见问题
把最常被问到的疑问集中补齐，方便用户和搜索引擎快速定位答案。
AA 和 AAA 一定都要满足吗？
不是所有场景都必须追求 AAA。多数产品网页先保证核心信息通过 AA，会更符合实际开发节奏；关键内容、阅读型页面和高可用性要求场景，再尽量向 AAA 靠近。
按钮和正文要用同一套标准吗？
按钮文字也需要足够可读，很多时候甚至应该比正文更明确。虽然视觉场景不同，但本质仍然要避免文字融进背景。
为什么设计稿里看着没问题，上线后却不通过？
因为设计稿通常在单一环境里看，真正上线后会遇到不同屏幕亮度、环境光和用户视力差异。对比度工具能把这些主观误差尽量缩小。
继续阅读
如果你在搭完整颜色栏目，可以继续沿着概念、配色和可读性方向往下看。