跳到主要内容

颜色对比度检测器

检测文字颜色与背景颜色之间的对比度,并对照 WCAG 无障碍等级进行评估。

此工具完全在您的浏览器中运行,您的数据绝不会离开您的设备。

关于颜色对比度检测器

如果文字与背景的区分度不够,低视力或色盲人士、年长用户,以及在强烈阳光下看手机的任何人都会难以阅读。《Web 内容无障碍指南》(WCAG)规定了文字与背景之间的最低对比度:AA 级要求普通文字为 4.5:1、大号文字为 3:1,更严格的 AAA 级则分别要求 7:1 和 4.5:1。本检测器可精确计算任意两种颜色的对比度,告诉您它们符合哪些等级,并提供实时预览。

使用方法

  1. 用取色器选择文字(前景)颜色和背景颜色,或输入 HEX、RGB 或 HSL 值。
  2. 查看对比度,范围从 1:1(无对比)到 21:1(白底黑字)。
  3. 查看通过了哪些 WCAG 等级。如果某个等级未通过,请将其中一种颜色调深或调浅,直至通过。
  4. 使用互换按钮,测试两种颜色对调后的效果。

常见问题

什么样的文字算大号文字?

WCAG 将大号文字定义为:常规字重下至少 18 磅(24 CSS 像素),或粗体下至少 14 磅(约 18.7 CSS 像素)。

我的网站应达到哪个等级?

AA 级是全球大多数无障碍法律和政策的目标,包括《欧洲无障碍法案》和美国的《美国残疾人法案》(ADA)。对于篇幅较长的阅读文本,建议尽可能达到 AAA 级。

“界面组件”检测是什么?

WCAG 2.1 及更高版本要求控件的可见部分(如输入框边框和图标)以及有意义的图形,与相邻颜色之间的对比度达到 3:1。