01
确认输入的是哪一层颜色
输入 3 位或 6 位 HEX。文字透明度在单独的选项里设置；8 位 HEX 不会被悄悄截掉 Alpha，背景也必须是不透明纯色。
颜色与可访问性
颜色对比度检查看清每一组文字配色
输入前景色和背景色，调好透明度与字号，再查看真实比值和五项阈值。
颜色对比度检查
预览文字
对比度比值
4.48:1
当前文字判定: 未通过 · AA · 要求 4.5:1
当前按普通文字判定 · 合成后的前景色: #777777
普通文字 AA · 4.5:1未通过
普通文字 AAA · 7:1未通过
大号文字 AA · 3:1通过
大号文字 AAA · 4.5:1未通过
界面图形 AA · 3:1通过
颜色预览
这段文字用于预览实际字号与颜色。
可达标的建议颜色
调整前景色
#767676 · 4.54:1
调整背景色
#060606 · 4.52:1
计算只在浏览器中进行，颜色值不会上传。
文字条件
结果为最新。
设计稿里的灰字看起来够清楚，落到白色表单上却可能只差一点点就达不到 AA。颜色对比度检查可以在发布前把这种临界配色算清楚，并显示它实际呈现的颜色。
做无障碍颜色检测，检查细小说明文字、大号标题或按钮边框时，先确定文字条件，再看结论。这款颜色对比度检查工具会把半透明前景色与背景合成，避免把原始 HEX 当成屏幕上真正的字色。
为什么要做颜色对比度检查
先还原屏幕上的叠色，再指出哪一侧改动可以达标。
透明文字先合成再测量
前景色的不透明度从 0% 到 100% 可调。颜色对比度检查先把它叠在指定的纯色背景上，展示合成后的 HEX，再计算相对亮度；不会把 50% 透明的深色文字误当成完全不透明。
分别预览改字色和改底色
当当前字号与目标等级不通过时，工具分别给出前景和背景的候选色及其比值。建议不会自动覆盖品牌色；先看预览，确认后再应用，必要时撤销。
读懂比值之前先确认三件事
色层、字号和目标等级不同，同一个配色的结论也会不同。
02
让字号对应真实场景
填写 CSS 像素字号和是否加粗。普通文字达到 24px，或粗体达到约 18.67px，才按大号文字判定；修改后自动检查会短暂停顿再更新。
03
先看阈值再复制
结果显示两位小数，但通过与否按未舍入数值计算。五项 AA/AAA/UI 判定一起列出；结果过期时不能复制，建议色也须先预览才可应用。
从叠色到阈值的完整判定
比值与通过条件分开展示，便于在设计评审里解释。
前景透明度合成
先在指定背景上混合前景，再用 WCAG 相对亮度公式计算文字背景对比度；界面同时显示合成色，方便核对实际颜色。
字号与粗体条件
普通文字和大号文字的 AA、AAA 门槛不同。20px 的普通字仍按普通文字算，不能因为看着偏大就套用 3:1。
五项结果并排
普通文字 AA/AAA、大号文字 AA/AAA 与有意义的界面图形 AA 都有独立结果。WCAG 色彩对比度检测会按所选文字条件给出当前结论与建议色。
两侧调整并可撤销
不达标时可分别尝试调整字色或底色，预览每个候选的真实比值。只有点击应用才改写输入，之后可以撤销一次。
单一配色检查能说明什么
这些限制会影响结果是否能代表页面上的真实情况。
- 背景必须是不透明纯色
- 透明背景还需要知道更下层画布；渐变和图片还需要逐像素采样。这里仅计算一层透明前景叠在纯色背景上的配色。
- 只接受 3 位或 6 位 HEX
- 可带或不带 #。CSS 命名色、rgb()、hsl()、OKLCH 与 8 位 HEX 不会被猜测转换；请先在颜色转换工具中处理。
- 通过不代表整页无障碍
- 颜色对比度检查只覆盖当前文字条件与这一组颜色；键盘操作、焦点可见性、其他组件状态和页面语义仍要单独检查。
- 不混用 APCA 结果
- 这里的 AA/AAA 来自 WCAG 2.x 比值。APCA 的算法与分数另有用途，不能放进同一张通过判定表。
颜色对比度检查常见问题
围绕普通文字、大号文字、透明度和页面整体可访问性回答。
普通文字的对比度需要达到多少？
普通文字达到 AA 至少要 4.5:1，AAA 至少要 7:1。颜色对比度检查用完整数值判定，显示四舍五入到 4.50:1 也不意味着一定通过。
大号文字的对比度标准是什么？
大号文字达到 AA 需要 3:1；普通文字仍需 4.5:1。字号是否够大要按实际 CSS 像素与粗体条件判断，不能只看视觉印象。
透明文字的对比度怎么算？
大号文字通常指至少 24px 的普通字，或至少约 18.67px 的粗体字。修改字号只会改变适用门槛，不会改变同一对颜色的比值。
AA 和 AAA 的区别是什么？
先把透明前景色逐通道混合到不透明背景，再计算两种可见颜色的相对亮度。0% 不透明度时两者相同，比值为 1:1。
颜色对比度达标就等于网站无障碍吗？
不等于。通过只说明这对颜色在所选文字条件下达到对应阈值；焦点、键盘、语义、其他页面状态与图片仍需检查。
发现某组颜色的判定不对？