颜色对比度检查器

即时根据 WCAG 2.1 指南检查颜色对比度。确保您的文本可读，并且您的设计对所有人都是无障碍的。免费且易于使用。

广告
广告

How to Use

  1. 1
    输入颜色 输入文本和背景色的 HEX 代码。
  2. 2
    查看预览 实时查看文本效果。
  3. 3
    检查比率 查看计算出的对比度比率。
  4. 4
    验证合规 检查是否通过 WCAG AA/AAA 标准。

为什么无障碍很重要

接触更广泛的受众

让您的内容对色觉缺陷者（约 1/12 男性，1/200 女性）以及低视力人群可用。

改善所有人的体验

良好的对比度提高了所有人的可读性，尤其是在屏幕昏暗或阳光强烈时。

了解 WCAG 评级

AA 级 (标准)

普通文本需 4.5:1，大号文本需 3:1。大多数网站的标准目标。

AAA 级 (增强)

普通文本需 7:1，大号文本需 4.5:1。为严重视力丧失用户提供增强的无障碍性。

100% 私密且安全

此对比度检查器完全在您的浏览器中运行。没有任何数据发送到我们的服务器。

颜色对比度检查器 常见工作流

颜色对比度检查器 最适合放在一个可重复的小流程里使用：先整理源文件，再完成处理，最后检查结果是否适合发布或分享。

先处理源文件

颜色对比度检查器 适合处理这类任务：即时根据 WCAG 2.1 指南检查颜色对比度。确保您的文本可读，并且您的设计对所有人都是无障碍的。免费且易于使用。。整个过程可以留在浏览器里完成，不必切换到更重的桌面软件。

再检查输出

处理后先预览结果，和原文件对照一下，再根据实际发布场景调整参数。

把下一步接起来

如果还要继续处理，可以留在“颜色工具”分类里完成相邻任务。

相关工作流

颜色工具 颜色选择器 调色板生成器

你可能还喜欢

颜色选择器

从图像或屏幕上拾取颜色。

调色板生成器

创建漂亮的调色板。

Word 图像提取器

从 Word 文档中提取原始图像而不损失质量。

相关指南

UI 设计中的色彩对比度实用指南

学习网页可访问性和色彩对比度的基础知识。了解 WCAG 评级（AA vs. AAA），并使用我们的快速检查和实用修复方法，让您的 UI 对每个人都清晰可读。

FAQ

什么是颜色对比度，为什么它很重要？

颜色对比度是前景色与其背景之间亮度的差异。高对比度确保视力受损的人可以有效地感知您的内容。

Logo 是否需要符合这些标准？

不需要，WCAG 指南为作为 Logo 或品牌名称一部分的文本，以及纯装饰性文本提供了例外。

如何修复低对比度？

增加亮度差异。使浅色更浅或深色更深。使用我们的实时预览进行实验。

广告