颜色对比度检测器
按 WCAG 2.1 的 AA 与 AAA 标准检测文字与背景的颜色对比度 — 即时显示对比度比值，附实时预览与通过/未通过徽章。
设置颜色
4.48:1越高越好。WCAG 对普通文字要求至少 4.5:1。Aa 普通文字 — 视觉传达设计
Aa 大号文字
关于此工具
这款颜色对比度检测器使用 WCAG 2.1 的对比度公式,衡量文字在其背景上的可读性。输入文字色和背景色的 HEX 值,或直接用取色器选取,工具会立即显示对比度比值(例如 4.52:1),并给出网页内容无障碍指南 AA 与 AAA 级别的通过或未通过徽章。实时预览会用所选配色显示示例文字,让你一眼判断效果,交换按钮可对调前景与背景。一切都在浏览器中运行,因此快速、私密,加载后即可离线使用 — 非常适合设计师、开发者以及所有构建无障碍界面的人。
使用方法
- 1 以 HEX 值输入文字(前景)颜色,或用取色器选取。
- 2 以同样方式输入背景颜色;#rgb 和 #rrggbb 两种写法均支持。
- 3 查看对比度比值,以及普通与大号文字的 AA/AAA 通过徽章。
- 4 用交换按钮对调颜色,并调整至至少达到 4.5:1。
工作原理
每种颜色先从 sRGB 转换为线性光:每个通道除以 255,大于 0.03928 的值再按伽马曲线运算。相对亮度为 L = 0.2126·R + 0.7152·G + 0.0722·B,绿色权重最高,因为人眼对绿色最敏感。两色之间的对比度比值为 (L1 + 0.05) / (L2 + 0.05),其中 L1 为较亮的颜色,L2 为较暗的颜色。其取值范围从 1:1(相同颜色)到 21:1(纯黑配纯白)。WCAG 2.1 的 AA 级别要求普通文字至少 4.5:1、大号文字至少 3:1,AAA 级别则提高到 7:1 和 4.5:1。大号文字大致指 18.66px 加粗或 24px 常规及以上。
常见问题
要通过 WCAG 需要多大的对比度?
WCAG 2.1 的 AA 级别要求普通文字至少 4.5:1、大号文字至少 3:1。AAA 级别更严格,要求普通文字 7:1、大号文字 4.5:1。多数网站以 AA 作为法律与实践基线。
什么算大号文字?
WCAG 将大号文字定义为至少 18.66px(约 14pt)加粗,或至少 24px(约 18pt)任意字重。大号文字更易阅读,因此允许较低的对比度阈值(AA 为 3:1,AAA 为 4.5:1)。
对比度比值如何计算?
每种颜色的相对亮度由其线性化的红、绿、蓝通道计算(L = 0.2126R + 0.7152G + 0.0722B)。比值为 (较亮 + 0.05) / (较暗 + 0.05),取值从 1:1 到黑配白的 21:1。
为什么纯黑配白是 21:1?
黑色的相对亮度为 0,白色为 1。代入 (1 + 0.05) / (0 + 0.05) 得 21,这是理论上的最大对比度。因此 #000000 配 #ffffff 能通过所有 WCAG 级别。
颜色对比度会影响 SEO 和无障碍法规吗?
会。足够的对比度是 ADA、第 508 条以及《欧洲无障碍法案》等法律所引用的无障碍标准的一部分,良好的可读性也能改善可用性指标。满足 WCAG AA 可降低法律风险,并让低视力或色觉障碍人士也能使用你的内容。
相关工具与用途
对比度检测器是无障碍网页与应用设计的必备工具。搭配颜色转换器,可在调整配色时于 HEX、RGB 与 HSL 之间切换;搭配百分比计算器,可在缩放间距或不透明度时使用。设计师、前端开发者和内容创作者用它确保按钮、标签与正文对所有人都清晰可读。