🛠️ 浏览器工具

颜色对比度检查器

检查颜色对比度以符合网页无障碍标准。使用实时预览、无障碍评级和改进建议，根据 WCAG 指南测试文本和背景颜色组合。

颜色对比度检查器

自信地创建无障碍颜色组合

文字颜色

#000000

背景颜色

#f0f4f8

预览

普通文本

This is an example of normal body text that would appear on your website or application.

大号文本

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

对比度比值

19.00:1

分数

普通文本

AAA

大号文本

AAA

WCAG 2.1 指南：AA要求普通文本为4.5:1，大号文本为3:1。AAA要求普通文本为7:1，大号文本为4.5:1。

提示与建议

✦Maintain a contrast ratio of at least 4.5:1 for normal text.
✦Use 3:1 or higher for large text (18pt or 14pt bold).
✦Consider using darker text on lighter backgrounds or vice versa.
✦For full WCAG AAA compliance, aim for a ratio of 7:1.
✦Adjust brightness or saturation slightly to improve contrast.

工具加载中...

如何检查颜色对比度

选择文本颜色

点击第一个颜色选择器选择您的文本颜色，或直接输入十六进制代码。

选择背景颜色

使用第二个颜色选择器选择用于对比度测试的背景颜色。

查看对比度结果

检查计算出的对比度，并查看普通文本和大型文本的 AA/AAA 评级。

预览您的设计

查看实时预览，了解您的颜色组合在实际文本内容中的显示效果。

主要功能

实时对比度测试

当您选择不同的文本和背景颜色组合时，即时计算对比度。

WCAG 合规性评级

根据网页内容无障碍指南，获取普通文本和大文本的 AA 和 AAA 评级。

实时预览面板

通过普通和大型文本示例，准确查看您的颜色组合效果。

视觉评分指示器

通过直观的圆形图表，查看您的对比度表现，分数范围为 0-100。

交互式颜色选择器

使用内置的颜色选择器工具，轻松选择文本和背景颜色。

无障碍提示

获取提高对比度并满足无障碍标准的实用建议。

什么是颜色对比度检查器？

颜色对比度检查器是一种测量文本和背景颜色之间亮度差异的工具。它根据 WCAG（网页内容无障碍指南）标准计算对比度，以确保内容对于有视觉障碍（包括色盲和低视力）的用户来说是可读的。

为什么要使用我们的颜色对比度检查器？

WCAG 合规性

通过准确的 AA 和 AAA 评级，确保您的设计符合国际无障碍标准。

实时反馈

调整颜色时即时查看结果，轻松找到符合标准的组合。

视觉评分系统

通过我们直观的 0-100 评分系统，一目了然地了解对比度表现。

无需安装

在浏览器中即时测试颜色组合，无需下载任何软件。

常见问题

什么是好的对比度？

对于普通文本，AA 标准建议至少 4.5:1 的对比度，AAA 标准建议 7:1。大型文本（18pt 或 14pt 粗体）AA 标准需要 3:1，AAA 标准需要 4.5:1。

AA 和 AAA 评级意味着什么？

AA 是大多数法规要求的标准无障碍合规性级别。AAA 是最高级别，为有更严重视力障碍的用户提供增强的无障碍性。

对比度是如何计算的？

对比度是根据 WCAG 指南定义的颜色的相对亮度计算的。它从 1:1（无对比度）到 21:1（最大对比度）。

什么算作大文本？

大文本定义为 18 点（24px）或更大，或者 14 点（18.66px）或更大（如果是粗体）。大文本的对比度要求更宽松。

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

良好的颜色对比度确保每个人都能阅读内容，包括有视力障碍、色盲的用户，或在强光下或低质量显示器上查看内容的用户。

我可以使用它检查任何颜色格式吗？

该工具接受十六进制颜色代码。您可以使用在线转换器或设计工具将其他格式（RGB、HSL 等）转换为十六进制。

颜色对比度检查器

颜色对比度检查器