← 返回工具箱

对比度检查

WCAG CONTRAST · 设计与媒体

WCAG 2.x 对比度计算与 AA / AAA 判定,双向结果一起看;无障碍配色过审不再靠猜。

前景色(文字)
背景色
对比度 · WCAG 2.x
对比度 · APCA
APCA(Lc 值)为 WCAG 3 草案算法,尚属 W3C 草案——正式验收仍以 WCAG 2.x 为准;APCA 极性不对称,两行分别是「前景作文字 / 背景作文字」。
色盲模拟预览 · 模拟结果仅供参考
色盲模拟预览

>_ 使用指南 · GUIDE

输入前景色与背景色,计算 WCAG 2.x 对比度比值并判定 AA / AAA 达标情况,正反两个方向的结果一起看(白底黑字与黑底白字的视觉重量并不对称)。调整任一颜色实时重算,直到达标。

这是无障碍(Accessibility)配色的事实标准:正文文字对比度 ≥ 4.5:1 过 AA,≥ 7:1 过 AAA;大字号(18pt+ 或 14pt 粗体)放宽到 3:1。设计评审、产品验收、海外合规(欧美 ADA/EN 301 549)都认这套数字——过审不再靠猜。本地计算,即改即得。

>_ 常见问题 · FAQ

Q1 · 对比度多少才算达标?

WCAG 标准:普通文字 ≥ 4.5:1(AA)、≥ 7:1(AAA);大文字(≥18pt 常规或 ≥14pt 加粗)≥ 3:1 过 AA。UI 组件(按钮边框、输入框描边)与图形另有 3:1 的要求。本工具按文字场景给出判定,把比值和通过档位一起显示。

Q2 · APCA 是什么?页面上的 Lc 值要怎么看?

本工具同屏显示两个标准:WCAG 2.x 比值(正式验收标准)与 APCA 的 Lc 值(WCAG 3 草案采用的新算法,尚属 W3C 草案)。APCA 更贴近真实感知可读性,对深底浅字场景的区分更好,Lc≥75 约等效正文 AA、Lc≥90 为最佳正文档;但正式验收仍以 WCAG 2.x 为准,Lc 值作为设计参考。APCA 极性不对称(谁当文字谁当背景结果不同),工具已按两个方向分别给出。

Q3 · 为什么浅灰字在白底上被认为不达标?

浅灰对白底对比度常只有 2–3:1,低于 4.5:1 基线——视力下降的用户、强光环境、低端屏幕上几乎不可读。这不是审美问题而是信息可达性问题。把文字色加深到 #767676 左右(约 4.54:1)即可过 AA,视觉效果依然轻盈。

Q4 · 正反方向(白字黑底 / 黑字白底)都要查吗?

建议都查。同一个颜色对在两种方向上的比值相同(数学上对称),但视觉观感不同——浅色文字在白底上比深色文字在黑底上更「隐形」(光晕效应)。暗色模式设计时尤其要正反都看,不能只按亮色模式的直觉套用。

Q5 · 品牌色不达标怎么办?必须换色吗?

不必推翻品牌色,有标准解法:① 品牌色只用于装饰与大面积背景,文字用从它衍生的深色变体;② 文字出现在品牌色底上时改用深色文字;③ 用半透明黑/白叠加调整底色明度再验证。原则是「品牌色管识别,达标色管阅读」,两者分工不必强行合一。

嵌入代码

把下面的代码复制到你的网页,即可将本工具嵌入为 iframe(自动隐藏导航与页脚)。

高度px
此工具在你的浏览器本地运行,输入内容不会上传。按 Ctrl K 可随时切换到其他工具。