颜色对比度检查工具

计算前景色与背景色的 WCAG 对比度，并显示 AA／AAA 通过状态。

前景色（文字）

背景色

示例文字 The quick brown fox

18.88:1对比度比值（WCAG 公式）

普通文字 AA（≥ 4.5:1）通过

普通文字 AAA（≥ 7:1）通过

大号文字 AA（≥ 3:1）通过

大号文字 AAA（≥ 4.5:1）通过

本工具仅报告 WCAG 对比度公式的计算结果以及四个阈值的通过／未通过状态，并不代表“本页面符合 WCAG”；实际合规性仍需结合字号、字重和整体设计逐一检查。

相似CSS 与设计

将代码转成美观的分享图片，支持多种主题

可视化设计线性、放射、圆锥渐变，即时复制 CSS 代码

实时预览玻璃拟态效果，一键复制 CSS 代码

还没有留言，抢先留下你的想法！

颜色对比度检查工具依据 WCAG 公式计算前景色与背景色的对比度，并标示普通和大号文字在 AA／AAA 等级下的通过情况。

通过 AA 就代表我的网页符合 WCAG 无障碍规范了吗？

不一定。本工具只报告对比度公式的计算结果和四个阈值的通过状态，实际是否符合 WCAG 还取决于字号、字重和页面整体设计等因素。

为什么通过／不通过不只用颜色表示？

仅靠颜色（例如绿点／红点）对色盲用户不友好，因此每个阈值都同时显示图标和文字（Pass／Fail）。

背景色是半透明的怎么计算？

半透明背景需要再提供一个不透明的“画布背景”颜色，工具会使用核心已有的合成逻辑算出合成后的不透明颜色，再计算对比度。