颜色对比度检查器
即时根据 WCAG 2.1 指南检查颜色对比度。确保您的文本可读，并且您的设计对所有人都是无障碍的。免费且易于使用。
预览文本
这是一些示例文本，用于演示颜色对比度。您可以使用它来查看您的颜色组合的可读性。
这是较大的粗体文本 (18pt)。
对比度
2.33
WCAG 2.1 结果
普通文本
AA失败
AAA失败
大号文本 (18pt+ 或 14pt+ 粗体)
AA失败
AAA失败
我们的对比度检查器如何工作
- 1输入您的颜色： 使用 HEX 代码（例如 #FFFFFF）输入前景色（文本）和背景色。您也可以使用便捷的颜色选择器进行直观选择。
- 2查看即时结果： 该工具立即计算对比度，并向您展示文本外观的实时预览。
- 3审查合规性： 我们为普通文本和大号文本提供清晰的 WCAG AA 和 AAA 级“通过”或“失败”指示，因此您确切知道自己的达标情况。
为什么无障碍很重要
接触更广泛的受众
大约每 12 名男性和每 200 名女性中就有 1 人患有某种形式的色觉缺陷。通过确保高对比度，您可以使您的内容对他们以及视力低下或与年龄相关的视力丧失的人可用。
改善所有人的用户体验
良好的对比度不仅仅是为了视力受损的人。它提高了所有人的可读性，尤其是在非理想条件下，如在昏暗的屏幕上、在明亮的阳光下或在多任务处理时。清晰的内容是好的商业实践。
了解 WCAG 评级
AA 级 (标准)
- 普通文本：要求对比度至少为 **4.5:1**。
- 大号文本 (18pt+ 或 14pt+ 粗体)：要求对比度至少为 **3:1**。
这是大多数网站和应用程序的目标。它为患有中度低视力或色盲的用户提供了足够的对比度，无需辅助技术即可阅读内容。
AAA 级 (增强)
- 普通文本：要求对比度至少为 **7:1**。
- 大号文本 (18pt+ 或 14pt+ 粗体)：要求对比度至少为 **4.5:1**。
此级别提供了增强的无障碍性，使内容对更广泛的受众（包括视力丧失更严重的人）可读。虽然并不总是强制要求，但达到 AAA 是专注于无障碍网站的最佳实践。
常见问题解答
什么是颜色对比度，为什么它很重要？
颜色对比度是前景色（如文本或按钮）与其背景之间亮度的差异。它对于可读性至关重要。高对比度确保视力受损的人（如色盲或低视力）可以有效地感知并与您的内容互动。
Logo 和附带文本是否需要符合这些标准？
不需要，WCAG 指南为作为 Logo 或品牌名称一部分的文本，以及纯装饰性或非活动 UI 组件（如禁用按钮）一部分的文本提供了例外。但是，所有信息性文本都应满足对比度要求。
如果对比度低，我该如何修复？
如果您的颜色组合失败，您需要增加亮度差异。您可以使浅色更浅（接近白色）或使深色更深（接近黑色）。使用我们工具的实时预览进行实验，直到找到既通过无障碍测试又符合您设计美学的组合。
100% 私密且安全
此对比度检查器完全在您的浏览器中运行。没有任何数据、颜色或信息发送到我们的服务器。您的工作对您来说完全是私密的。