颜色对比度检查器
输入两种颜色,即时查看 WCAG 对比度及 AA/AAA 判定指引。
输入 hex 或 RGB 的前景色和背景色,即时计算 WCAG 对比度,查看 AA/AAA 结果、文字预览,并可获取可选的调整建议。
如何使用此颜色对比度检查器
输入或粘贴前景色和背景色。工具将有效输入规范为大写 hex,即时计算 WCAG 对比度,并显示 AA 与 AAA 阈值的通过/未通过。可使用建议修复、通过 URL 分享或重置。
WCAG 对比度阈值
WCAG 2.x 要求正常文字 AA 至少 4.5:1,大号文字 AA 至少 3:1,正常文字 AAA 至少 7:1,大号文字 AAA 至少 4.5:1。本工具始终显示全部四项结果以便比较。
支持的颜色格式
可输入 #RGB、#RRGGBB、rgb(r,g,b) 或逗号分隔的 r,g,b。通道须为 0–255 整数。v1 不支持 alpha 透明、8 位 hex、HSL/HSLA 和 CSS 命名颜色。
通过和未通过的含义
通过表示计算对比度达到或超过该等级阈值;未通过表示未达到。标签和图标配合颜色,避免仅靠颜色传达结果。
常见问题
为何不支持 alpha 和渐变?
v1 仅评估完全不透明的 sRGB 颜色。alpha 混合和渐变需要本工具尚未建模的合成规则,因此 rgba()、8 位 hex 和渐变分析不在 MVP 范围内。
对比度如何计算?
使用 WCAG 相对亮度公式处理不透明 sRGB:线性化各通道、计算亮度,再应用 (较亮 + 0.05) / (较暗 + 0.05)。显示值保留两位小数,阈值判断使用完整精度。
建议修复做什么?
沿亮度路径向黑或白确定性调整所选前景或背景色,直至达到所选 WCAG 等级,并在可能时返回最近的合规 hex 及结果对比度。
可以分享特定颜色组合吗?
可以。有效的前景、背景和文字大小会同步到 URL 参数(例如 ?fg=000000&bg=FFFFFF&size=normal),可直接链接到结果。
页面会保存我的颜色吗?
计算完全在浏览器中进行。最后一个有效颜色对可能保存在本机 localStorage 中;使用重置可清除输入、URL 参数和已存状态。