WCAG 对比度检测
输入前景色与背景色，实时计算对比度比值，判定 AAA / AA / AA Large 可读性等级。
三步上手
- 1填两色：分别输入前景（文字）色与背景色。
- 2看评级：实时算出对比度比值，标注 AAA / AA / AA Large 是否通过。
- 3调对比：不达标时沿建议色微调明度，直到达到正文 4.5:1。
对比度检测
检测前景色与背景色的 WCAG 对比度，判断文本可读性等级。
#FFFFFF
#2457D6
小号辅助说明文字，用于检测详情。
各等级对比度要求？
AAA：普通文本 ≥ 7:1；AA：普通文本 ≥ 4.5:1；AA Large：大文本 ≥ 3:1。建议正文至少达到 AA 标准。
如何选择前景色和背景色？
前景色通常是文字颜色，背景色是文字所在区域的底色。可分别点击颜色选择器调整，右侧实时显示对比度比值与达标等级，下方预览区展示实际文本效果。
对比度怎么算，达标线该怎么记
WCAG 的对比度是两个颜色相对亮度的比值，范围 1:1 到 21:1。 相对亮度不是简单的「灰度平均值」：它先把每个通道按 sRGB 传输曲线线性化， 再按人眼对红绿蓝的敏感度加权求和。这就是为什么有些颜色看起来差不多亮， 对比度数字却差很多——人眼对绿色最敏感，纯绿比纯蓝的亮度高得多。
达标线按内容类型区分，记两张表就够： 正文文本 4.5:1，大号文本 3:1（「大号」指 18pt 及以上，或 14pt 及以上的粗体）； 增强级（AAA）分别是 7:1 与 4.5:1。 非文本内容（图标、输入框描边、图表分区、聚焦指示）至少 3:1。 注意：占位符文字、禁用态文字同样算文本，只是实践中常被忽略。
几个高频误判值得单独提醒。其一，渐变或图片上的文字： 对比度随位置变化，必须在最不利的位置（最浅或最深处）各测一次。 其二，半透明文字：实际颜色是合成后的结果，要按合成值计算， 而不是按原始色值计算。其三，边框与背景： 如果元素靠边框界定范围，边框对相邻背景也要满足 3:1。 其四，悬停与按下态同样要达标，不能只看默认状态。
还要知道对比度标准的边界：WCAG 2.x 的比值在某些场景（尤其是深色底浅色字） 与主观感受并不完全一致，因此业界也在推进 APCA 这类感知更均匀的模型。 但在现行合规要求下，仍以 WCAG 2.x 的 4.5:1 / 3:1 为准—— 它是法律与验收口径，达标不等于好看，不达标则一定有风险。
本工具按 WCAG 公式在本地计算，同时给出 AA / AAA 判定与「还差多少」的提示： 若未达标，优先调整明度（拉开深浅），其次再调色相与饱和度。 所有计算都在浏览器完成，输入的颜色不会上传。
流程上建议把对比度检查放在两个节点各做一次：设计交付时确认色板本身达标， 前端联调时确认真实组件（含悬停、禁用、渐变背景、图片上的文字）也达标。 发现不达标时优先调整明度而不是换色相——改动最小，也最容易通过评审。