🎯

色彩对比度检查器

检查颜色对比度以符合WCAG无障碍标准。测试前景和背景颜色的AA和AAA标准。

The quick brown fox jumps over the lazy dog

Body copy at 16px - this is what your visitors will actually read.

AA Normal
≥ 4.5:1 · 16px
AA Large
≥ 3:1 · 18px+
AAA Normal
≥ 7:1 · 16px
AAA Large
≥ 4.5:1 · 18px+

WCAG无障碍指南

AA Normal (4.5:1): 普通文本的最低对比度要求。适用于大多数网页内容。

AA Large (3:1): 大号文本的最低对比度(18pt+或14pt+粗体)。

AAA Normal (7:1): 普通文本的增强对比度。最高无障碍标准。

AAA Large (4.5:1): 大号文本的增强对比度。建议用于重要内容。

预设

历史记录

WCAG无障碍指南

色彩对比度检查器帮助您确保网站符合WCAG无障碍标准。

嵌入此工具

× px

                        

💡 集成提示

复制嵌入代码并粘贴到您网站的HTML中。响应式版本会自动适应所有屏幕尺寸。

0 个评分
✓

热门工具

没有更多工具
探索所有工具

关于色彩对比度检查器

用十六进制色值或取色器设定前景色和背景色,这款检测器会给出 WCAG 2.1 对比度,并对 AA 普通文本(4.5:1)、AA 大号文本(3:1)、AAA 普通文本(7:1)和 AAA 大号文本(4.5:1)分别标出通过或未通过。实时示例会同时展示标题和正文字号下的效果,正是设计师确认配色前所需要的。相对亮度的计算在您的浏览器中进行,保存的配色对存放在本地存储中。

使用场景

开发者和测试工程师使用颜色对比度检查器查看、校验或转换数据。
运维(DevOps)人员随时调试配置文件、令牌或 API 响应。
学习 Web 开发、数据格式或编码方式的学生,可以用颜色对比度检查器动手实践。
技术文档写作者准备代码示例、配置样例或文档素材。
安全研究员和漏洞赏金猎人在没有命令行环境时,需要一个即开即用的试验场。

如何使用

1

在“前景色”一栏设置文字颜色:可以点击色块选取,也可以在旁边的输入框中直接填写十六进制值,例如 #4f46e5。

2

用同样的方式在“背景色”一栏设置页面底色;大号 Aa 预览会立刻重绘,右上角的对比度徽标也随之更新。

3

查看预览下方的四张 WCAG 卡片——AA 普通文字、AA 大号文字、AAA 普通文字和 AAA 大号文字——每张都会用绿色对勾或红色叉号标出是否达到对应门槛。

4

点击两个颜色框之间的交换箭头,可以测试反转后的搭配;也可以选择 White on Dark、GitHub Dark 等预设,直接载入常见配色。

5

点击大号对比度数值下方的“复制”,可把比值和四项通过/未通过结果一起复制到剪贴板;点击“保存”则会把这组配色留在历史记录条中。

专业提示

  • 直接粘贴内容即可,颜色对比度检查器会自动识别常见的输入格式并套用合理的默认设置。
  • 善用快捷键(Ctrl/Cmd+A 全选、Ctrl/Cmd+C 复制),在颜色对比度检查器中操作会更快。
  • 输入内容特别大时建议分批处理:浏览器标签页通常能承载数 MB 文本,但解析超大数据可能让界面短暂卡顿。
  • 颜色对比度检查器不会记录或保存您的输入。如果需要留存记录,请把重要结果复制到本地文件或笔记应用中。
  • 把颜色对比度检查器与本站其他工具(格式化工具、转换器、编码器)搭配使用,无需离开浏览器即可搭建完整的数据处理流程。

常见问题解答

是的,完全免费:无需注册、无需 API 密钥、没有水印,也没有使用次数限制。

不会。颜色对比度检查器完全在您的浏览器本地运行,输入内容不会经过我们的服务器。

没有硬性上限,但超过几 MB 的输入可能会变慢,具体取决于设备的内存。

可以。用颜色对比度检查器生成的结果归您所有,可自由用于任何个人或商业项目。

大部分逻辑由客户端 JavaScript 完成,因此首次加载之后,通常在没有网络连接的情况下也能继续使用。

没有。颜色对比度检查器在您的浏览器中运行,硬件能跑多少就能处理多少,既不需要 API 密钥,也不会被限流。

FreeWebTools AI
Powered by free AI models · Full chat →