免费转换器

颜色对比度 检查器 (WCAG)

检查两种颜色之间的对比度,确保符合 WCAG AA 和 AAA 无障碍标准。免费、即时,完全在浏览器中运行。

示例文字 — 普通大小

示例小文字 — 14px

对比度:21.00:1
WCAG AA普通文本通过
WCAG AA大文本通过
WCAG AAA普通文本通过
WCAG AAA大文本通过

关于此工具

根据 WCAG 2.1 辅助功能指南检查前景文本和背景颜色之间的颜色对比度。输入十六进制代码、RGB 值或 HSL 值形式的颜色,并立即查看正常和大文本尺寸下的对比度以及 WCAG AA 和 AAA 合规性的通过/失败结果。

使用方法

  1. 使用颜色选择器或十六进制输入输入或选择前景色(文本)。
  2. 输入或选择您的背景颜色。
  3. 立即查看对比度和 WCAG 2.1 AA/AAA 通过/失败结果。
  4. 调整颜色直到达到所需的合规级别。

常见问题

WCAG 合规性需要多少对比度?
WCAG AA 要求普通文本为 4.5:1,大文本(18pt+ 或 14pt+ 粗体)为 3:1。 WCAG AAA 要求普通文本为 7:1,大文本为 4.5:1。最大可能比例为 21:1(黑底白字)。
为什么色彩对比度很重要?
足够的对比度可确保弱视、色盲或在明亮阳光下观看屏幕的用户也能阅读文本。这也是 ADA 和欧盟无障碍法规对许多网站的法律要求。
WCAG 中什么被视为“大文本”?
大文本定义为 18pt (24px) 及以上的常规粗细,或 14pt (18.66px) 及以上的粗体文本。大文本的对比度要求较低,因为它本质上更容易阅读。
该工具是否检查非文本元素的对比度?
WCAG 2.1 要求 UI 组件和图形对象(按钮、图标、表单字段)的对比度为 3:1。您也可以使用此工具来验证这些内容 - 只需输入组件和背景颜色即可。