Glyph WidgetsGlyph Widgets
关于联系隐私条款在Ko-fi上支持

© 2026 Glyph Widgets. 保留所有权利。

·

100% 客户端处理

对比度检查器

最后更新:2026年3月6日

检查两种颜色之间的对比度,确保符合WCAG 2.1无障碍标准。测试普通文本和大文本的AA和AAA级别。

功能

  • ▶WCAG 2.1对比度比率计算
  • ▶AA和AAA合规性检查
  • ▶普通文本和大文本阈值
  • ▶带示例文本的实时预览
  • ▶复制对比度比率到剪贴板
  • ▶加载后可离线工作

如何使用此工具

1

选择前景颜色

使用颜色选择器输入或选择您的文本/前景颜色,或输入HEX值。这通常是您的文本颜色。

2

选择背景颜色

输入或选择您的背景颜色。如需要,使用交换按钮快速反转前景和背景。

3

查看结果

检查对比度比率和WCAG合规徽章。绿色徽章表示通过,红色表示未通过。所有文本至少应达到AA合规。

4

预览您的设计

使用预览部分查看您的颜色组合在不同大小的实际文本中的效果,然后再在设计中实施。

WCAG无障碍标准

WCAG(Web内容无障碍指南)定义了对比度要求,以确保视觉障碍人士能够阅读内容。AA级要求普通文本4.5:1,大文本3:1。AAA级分别要求7:1和4.5:1。

相对亮度公式

相对亮度使用公式测量颜色的感知亮度:L = 0.2126R + 0.7152G + 0.0722B。系数反映了人眼的敏感度,绿色最为突出。计算前从sRGB进行线性化。

对比度计算

对比度公式为:(L1 + 0.05) / (L2 + 0.05),其中L1是较浅颜色的亮度,L2是较深颜色的亮度。0.05的偏移量防止除以零并考虑环境光。

大文本与普通文本

大文本定义为18pt(24px)常规字重或14pt(18.5px)粗体。大文本的对比度要求较低,因为其较大的尺寸使其自然更易阅读,即使对比度较低。

为什么对比度很重要

大约8%的男性和0.5%的女性有色觉缺陷。低对比度文本对老年用户、在强烈阳光下或低质量显示器上也难以阅读。良好的对比度对所有人都有益。

常见问题

对比度比率衡量两种颜色之间亮度(明度)的差异。范围从1:1(无对比度,相同颜色)到21:1(最大对比度,黑白对比)。比率越高意味着可读性和可访问性越好。

相关工具

颜色选择器

从屏幕选择颜色

颜色转换器

在格式之间转换

调色板生成器

生成调色板

#000000
#FFFFFF

预览

示例标题文本

这是常规段落文本。良好的对比度确保所有用户(包括视力障碍者)的可读性。

这是需要更好对比度才能阅读的小文本。

对比度

21.00:1
正常 AA≥ 4.5:1
正常 AAA≥ 7:1
大字 AA≥ 3:1
大字 AAA≥ 4.5:1
分享

WCAG快速参考

AA级(最低)正常4.5:1,大字3:1
AAA级(增强)正常7:1,大字4.5:1
大文字18pt以上常规或14pt以上粗体

无障碍色彩对

点击任意配对将其用作前景/背景颜色

Saved Presets is a Supporter feature.

Tool History is a Supporter feature.

Tool Notes is a Supporter feature.