颜色对比度检查

Q: 4.5:1 和 7:1 是怎么定出来的？

它们来自 W3C 的 WCAG 2.1 推荐标准：对正文文本，AA 级（最低合规）要求对比度 ≥ 4.5:1，AAA 级（增强）要求 ≥ 7:1。这两个阈值综合考虑了低视力人群的辨识能力，是长期稳定的规范值，不是经验数字。大文本（≥18pt 或 ≥14pt 粗体）因笔画更粗易辨认，阈值放宽到 AA ≥ 3:1、AAA ≥ 4.5:1。

Q: 对比度 21:1 是什么意思，能超过吗？

21:1 是理论上限，出现在纯黑（#000000）配纯白（#FFFFFF）时：计算公式分子分母分别取最亮与最暗的相对亮度，最大值就是 (1.0 + 0.05) / (0 + 0.05) = 21。任何配色都不可能超过 21:1，看到更高的数值说明算法有问题。

Q: 我的颜色通过了检测，为什么还觉得看不清？

三个常见原因：① 只过了最低线——4.5:1 是可接受下限，不是舒适值，长文建议往 7:1 靠；② 字重与字号偏小——细体小字即使合规也吃力，对比度要和字号、行高一起看；③ 实际渲染有透明度或渐变——检测用的是纯色，实际显示被叠加后会低于计算值。

Q: 渐变背景 / 图片上的文字怎么算？

WCAG 要求按实际呈现的最终颜色计算。做法是取文字覆盖区域里最不利的那一点：渐变就取与文字最接近（对比度最低）的起止色分别验证；图片上的文字建议加半透明遮罩或文字描边，再用叠加后的实际采样色来检测。

Q: 为什么建议色和我原来的颜色差那么多？

建议色是只调整明度、保持色相与饱和度得到的「刚好达标」颜色。如果原色本身很浅（比如浅黄配白底），要跨过 4.5:1 就必须大幅压暗，观感自然会变。这种情况下更好的做法是换背景：深色背景配浅色文字通常更容易达标，点「🔄 交换」可以试试反白方案。

Q: 按钮边框、图标这类也要检查吗？

要。WCAG 2.1 的 SC 1.4.11 非文本对比度要求：用于识别 UI 组件状态与边界的视觉信息（输入框边框、按钮轮廓、图标、图表线条等）对比度需 ≥ 3:1。这条常被忽略，尤其是「浅灰边框配白底」的极简设计，很多只有 1.5:1 左右。

Q: 计算会上传我的配色方案吗？

不会。颜色处理与对比度计算全部在你的浏览器内完成，没有任何网络请求。仅当你手动点「📋 复制配色」时，内容才会进入本机剪贴板。

设计辅助完全免费 ⚡ 实时计算 🎯 AA / AAA 判定 🛠 给出修正色 🌙 支持黑夜模式

浅灰字配白底到底过不过关？输入前景色与背景色，按 WCAG 2.1 公式实时算出对比度，并按正文 / 大文本 / UI 组件三档分别判定 AA 与 AAA；不达标时还会给出保持色相只调明度的修正色。

类别程序员 · 设计辅助

运行方式纯前端 · 本地计算

判定标准WCAG 2.1（现行推荐标准）

数据存储本地保存（localStorage）

🎨 对比度检查

按 WCAG 2.1 的相对亮度公式实时计算对比度（1:1 ~ 21:1），并按正文 / 大文本 / UI 组件分别判定 AA 与 AAA。改色即时生效，全部为本地计算，不上传任何内容。

前景色（文字）

支持 #333 与 #333333 两种写法。

背景色

纯白 #FFFFFF 与纯黑 #000000 之间最高 21:1。

👀 实时预览

大字号标题文本 18pt 以上

粗体文本 14pt（约 18.66px）以上同样算大文本

这是一段正常大小的正文示例文字，用于判断 4.5:1 的正文标准是否达标。中文笔画更密，实际阅读体验通常比拉丁字母更依赖对比度。

按钮边框 UI 组件与图形对象要求 ≥ 3:1

📊 对比度结果

✅ 分级判定明细

🛠 修正建议

⚡ 常见配色预设

核心特性

WCAG 2.1 相对亮度公式精确计算

对比度 1:1 ~ 21:1 实时显示

正文 / 大文本 / UI 组件三档判定

AA 与 AAA 分级结论一目了然

实时预览大标题、粗体、正文与按钮

不达标时给出修正建议色

建议色保持原色相与饱和度

纯黑 / 纯白极端方案对比

十六进制与取色器双向互填

常见配色预设一键套用

「看着挺清楚」不等于「合规」

配色能不能看清，主观感受非常不可靠：设计师在明亮显示器前觉得没问题的浅灰字，用户在户外阳光下可能完全看不清；年轻人无感的低对比，对低视力用户就是一道门槛。所以 WCAG 把这件事量化成了公式：先把颜色各通道线性化，算出相对亮度，再用 (L亮 + 0.05) / (L暗 + 0.05) 得到对比度，取值从 1:1（同色）到 21:1（纯黑配纯白）。

阈值也不是一刀切，而是按文字大小分档：正文要求 AA ≥ 4.5:1、AAA ≥ 7:1；大文本（≥18pt 常规字，或 ≥14pt 粗体）因为笔画更粗，AA 只要求 ≥ 3:1、AAA ≥ 4.5:1；另外 WCAG 2.1 的 SC 1.4.11 规定非文本内容（按钮边框、图标、图表线条等 UI 组件）也要 ≥ 3:1。

很多团队卡在「知道不达标但不知道改成什么」。本工具的做法是：保持原有色相与饱和度，只沿明度方向微调，找到刚好跨过阈值的最接近颜色——既能通过检测，又最大程度保留品牌色观感。所有计算在浏览器本地完成，不上传任何内容。

怎么用

选前景色

用取色器或在文本框输入十六进制（支持 #333 与 #333333），前景色通常是文字或图标颜色。
选背景色

同样方式设置背景色；点「🔄 交换」可快速对调两者验证反白方案。
看判定结果

结果区显示对比度数值与等级徽章（AAA / AA / AA 大文本 / 不合格），下方明细表逐条列出正文、大文本、UI 组件的通过情况。
查修正建议

未达标时，建议区会给出达到 AA（4.5:1）与 AAA（7:1）的修正色，点「应用」即可直接套用。
复制落地

点「📋 复制配色」把带对比度注释的 CSS 声明复制到剪贴板，直接粘进样式文件。

使用技巧

18pt ≈ 24px，14pt 粗体 ≈ 18.66px：达到这个尺寸才算「大文本」，能享受 3:1 的宽松阈值。
同一配色正反看都一样：对比度是对称的，交换前景背景不改变数值，但会改变视觉效果，建议两种都试。
纯白背景上 #767676 的灰刚好卡在 4.54:1，是「能过 AA 的最浅灰」，再浅就不合规了。
半透明文字、渐变背景、图片上的文字需要按实际叠加后的最终颜色计算，别拿原始色值直接判。
图标、输入框边框、图表线条属于非文本内容，按 SC 1.4.11 要求 ≥ 3:1，常被漏检。
禁用态（disabled）文本在 WCAG 中豁免，但仍建议保持在 3:1 以上以免被误认为不可读。
中文笔画密度高于拉丁字母，过线不等于好看：正文建议尽量做到 7:1，长文尤其如此。
对比度只是可读性的一环，还需配合字号、行高、字重一起评估；深色模式下纯白文字建议改用略灰的 #E8E8E8 减轻光晕。

更新记录

v1.0 2026-09-20 首次上线：WCAG 2.1 相对亮度与对比度实时计算、正文 / 大文本 / UI 组件三档 AA 与 AAA 判定、实时预览、保持色相的修正建议色、纯黑白极端方案与常见配色预设。

常见问题

4.5:1 和 7:1 是怎么定出来的？

它们来自 W3C 的 WCAG 2.1 推荐标准：对正文文本，AA 级（最低合规）要求对比度 ≥ 4.5:1，AAA 级（增强）要求 ≥ 7:1。这两个阈值综合考虑了低视力人群的辨识能力，是长期稳定的规范值，不是经验数字。大文本（≥18pt 或 ≥14pt 粗体）因笔画更粗易辨认，阈值放宽到 AA ≥ 3:1、AAA ≥ 4.5:1。

对比度 21:1 是什么意思，能超过吗？

21:1 是理论上限，出现在纯黑（#000000）配纯白（#FFFFFF）时：计算公式分子分母分别取最亮与最暗的相对亮度，最大值就是 (1.0 + 0.05) / (0 + 0.05) = 21。任何配色都不可能超过 21:1，看到更高的数值说明算法有问题。

我的颜色通过了检测，为什么还觉得看不清？

三个常见原因：① 只过了最低线——4.5:1 是可接受下限，不是舒适值，长文建议往 7:1 靠；② 字重与字号偏小——细体小字即使合规也吃力，对比度要和字号、行高一起看；③ 实际渲染有透明度或渐变——检测用的是纯色，实际显示被叠加后会低于计算值。

渐变背景 / 图片上的文字怎么算？

WCAG 要求按实际呈现的最终颜色计算。做法是取文字覆盖区域里最不利的那一点：渐变就取与文字最接近（对比度最低）的起止色分别验证；图片上的文字建议加半透明遮罩或文字描边，再用叠加后的实际采样色来检测。

为什么建议色和我原来的颜色差那么多？

建议色是只调整明度、保持色相与饱和度得到的「刚好达标」颜色。如果原色本身很浅（比如浅黄配白底），要跨过 4.5:1 就必须大幅压暗，观感自然会变。这种情况下更好的做法是换背景：深色背景配浅色文字通常更容易达标，点「🔄 交换」可以试试反白方案。

按钮边框、图标这类也要检查吗？

要。WCAG 2.1 的 SC 1.4.11 非文本对比度要求：用于识别 UI 组件状态与边界的视觉信息（输入框边框、按钮轮廓、图标、图表线条等）对比度需 ≥ 3:1。这条常被忽略，尤其是「浅灰边框配白底」的极简设计，很多只有 1.5:1 左右。

WCAG 3.0 出来后这套判定会变吗？

WCAG 3.0 目前仍是草案，其中对比度部分曾提出 APCA 等新算法，但尚未成为推荐标准，且 W3C 已明确现行合规判定仍以 WCAG 2.1 为准。本工具按 2.1 的官方公式与阈值计算，不预测未来版本；等 3.0 正式成为标准后再同步更新。

计算会上传我的配色方案吗？

不会。颜色处理与对比度计算全部在你的浏览器内完成，没有任何网络请求。仅当你手动点「📋 复制配色」时，内容才会进入本机剪贴板。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！