♿
对比度检测器
WCAG 对比度检测 · 前景背景双色 · AA / AAA 一键判定
使用说明
按 WCAG 标准实时算「前景色 vs 背景色」的对比度：给一个 0~21:1 的比值，并逐条判定 AA Normal(≥4.5)、AA Large(≥3)、AAA Normal(≥7)、AAA Large(≥4.5)、UI Components(≥3) 是否达标。可以自由取色、互换前后景，也能一键「随机推荐」生成达 AA / AAA 的组合；下方「WCAG 最佳状态案例」挑了经典达标配色与配色方案库里的 AA 方案，点一下就套进检测器。取色用的和「配色专家」是同一套组件，颜色数据不联网、全部在本机算。
🔒 本工具完全在你的浏览器里运行。文件与粘贴的数据都不会上传到任何服务器，断网也能用、不限次数。
常见问题
对比度的比值是怎么算的？
按 WCAG 2.1：先算两个颜色的相对亮度，再取 (亮+0.05)/(暗+0.05)，范围 1:1（同色）到 21:1（纯黑对纯白）。
AA 和 AAA 有什么区别？
AA 是基本门槛：正文 4.5:1、大字 3:1；AAA 更严格：正文 7:1、大字 4.5:1。面向大众的网站做到 AA 即可，政企无障碍验收常要 AAA。
多大算「大字」？
≥24px（约 18pt）的普通字，或 ≥18.66px（约 14pt）的粗体字，都按大字标准（3:1）判定。
「UI Components」指什么？
按钮、输入框边框、图标这类界面元素的轮廓，WCAG 要求与相邻色至少 3:1，本工具一并给出 3:1 的判定。
和「配色专家」有什么不同？
配色专家是从一个主色出发生成整套配色；这里专注验一个具体的前景/背景组合到底合不合规，适合上线前逐个核对色值。