Developer Utility

Color Contrast Checker

计算文本颜色与背景颜色之间的对比度，并检查是否符合 WCAG AA 和 AAA 无障碍标准。

对比度计算 计算文本颜色与背景颜色的相对亮度差异，并显示准确的对比度。

WCAG 标准检查 分别检查普通文本和大文本是否符合 AA 和 AAA 标准。

实时预览 立即查看所选颜色组合在实际界面中的显示效果。

颜色输入

使用 HEX 颜色代码输入文本颜色和背景颜色，或通过颜色选择器进行选择。

文本颜色

背景颜色

Preview Color Contrast Checker

此示例文本用于展示文本在背景上的实际显示效果。可用于检查正文、按钮、卡片、横幅以及深色模式配色方案。

查看计算出的对比度以及 WCAG 无障碍标准通过情况。

就绪

Contrast Ratio -

请输入颜色后点击“检查对比度”按钮。

普通文本 AA 4.5:1 以上 等待中

普通文本 AAA 7:1 以上 等待中

大文本 AA 3:1 以上 等待中

大文本 AAA 4.5:1 以上 等待中

检查结果将在此处显示。

根据文本大小和无障碍等级，需要满足不同的对比度要求。

普通文本

正文、说明文字、菜单和表单标签等较小文本通常需要至少 4.5:1 的对比度。

大文本

较大的标题或加粗文本在 AA 标准下可使用较低的 3:1 对比度。

UI 组件

在设计按钮、徽章、卡片、表单等界面元素时，也应检查文本是否具有足够的可读性。

Color Contrast Checker 是一款免费的开发与设计工具，用于计算文本颜色和背景颜色之间的对比度，并评估其可读性。

适用于网站、博客主题、按钮、卡片、深色模式界面、落地页和设计系统等场景。

什么是 WCAG AA 和 AAA 标准？

WCAG 是网页内容无障碍指南。普通文本需要至少 4.5:1（AA）和 7:1（AAA）的对比度。大文本需要至少 3:1（AA）和 4.5:1（AAA）的对比度。

什么是大文本？

大文本通常指较大的标题或加粗文字。相比普通正文，它允许使用较低的对比度标准。

对比度越高越好吗？

更高的对比度通常有助于提高可读性，但过强的对比度也可能造成视觉疲劳。应在可访问性和设计美观之间取得平衡。

支持哪些 HEX 格式？

支持 #111827 这样的 6 位 HEX 颜色代码以及 #fff 这样的 3 位 HEX 颜色代码。如果省略 # 符号，系统会自动补充。

通过检测是否意味着完全符合无障碍要求？