跳到主要内容
项目详情

Contrast Checker 是 WebAIM 提供的网页无障碍颜色对比度检测工具,用于判断前景色与背景色组合是否满足 WCAG 对文本、图形和用户界面组件的对比度要求。它支持以 RGB 十六进制格式输入颜色,也可以通过 Color Picker 选择颜色,并可调整前景色的 Alpha 透明度和感知亮度。除了网页中的交互式检测页面,它还提供可通过 permalink 调用的基础 API,以及可在任意网页中启动的 Bookmarklet,便于从屏幕上的实际元素提取颜色并进行检测。

核心功能

前景色与背景色对比度检测

输入前景色和背景色后,工具会计算两种颜色之间的 Contrast Ratio,并显示对应的检测结果。颜色可以使用 RGB 十六进制格式填写,也可以通过 Color Picker 进行选择。页面会分别展示 Normal Text、Large Text,以及 Graphical Objects and User Interface Components 的 WCAG 判定状态。

WCAG AA 与 AAA 判定

工具会针对普通文本和大文本显示 WCAG AA、WCAG AAA 是否通过。WCAG 2.0 Level AA 对普通文本要求至少 4.5:1,对大文本要求至少 3:1;Level AAA 对普通文本要求至少 7:1,对大文本要求至少 4.5:1。页面还会按照 WCAG 2.1 的要求检查图形和用户界面组件,例如表单输入框边框,其对比度要求至少为 3:1。

大文本标准说明

Contrast Checker 对 Large Text 采用明确的文字尺寸定义:14 point、通常为 18.66px 且为粗体或更大,或者 18 point、通常为 24px 或更大。检测结果会将普通文本和大文本分开呈现,因此使用者可以根据文字尺寸查看相应的 AA 或 AAA 状态,而不是将所有文字套用同一项标准。

Alpha 透明度与感知亮度调整

除了颜色本身,工具还允许输入 Alpha 值,用来调整前景色的透明度。Lightness slider 可用于调整颜色的感知亮度。这样可以在检测颜色组合时观察透明度和亮度变化对对比度结果的影响。

API 与页面内取色

该工具也提供基础 API:在 Contrast Checker 的 permalink 后追加 &api,即可获取包含对比度数值以及 AA、AAA 通过或未通过状态的 JSON 对象。页面还支持 Contrast Checker Bookmarklet,安装并使用后,可以在任意网页中启动一个迷你版 Contrast Checker,并使用前景色和背景色的取色器检测屏幕上的内容。Color Picker 中的 eye dropper tool 还可以从屏幕上的元素提取颜色值。

使用方式

在网页中输入前景色和背景色,或使用 Color Picker 选择颜色,再根据需要设置 Alpha 值和 Lightness。工具会直接显示对比度比例以及不同 WCAG 检测项的通过状态。需要程序化读取结果时,可在 permalink 后追加 &api 获取 JSON;需要检测其他网页中的实际元素时,可安装并使用 Contrast Checker Bookmarklet。正文未说明是否需要注册,也未说明需要自备模型 Key;页面提供了颜色输入、取色和 API 输出方式。

适用人群与场景

网页设计与开发人员可以用它检查文字颜色和背景色是否满足 WCAG AA 或 AAA 要求。负责无障碍审核的人员可以分别核对普通文本、大文本、图形和用户界面组件的对比度标准。需要批量读取检测结果的开发者可以使用基础 API 获取 JSON;需要直接检查屏幕或网页元素颜色的使用者,则可以使用 Color Picker 的取色器或 Bookmarklet。

注意事项

WCAG AA 和 AAA 对普通文本、大文本、图形及用户界面组件采用不同的最低对比度要求,使用时需要先确认文字是否属于工具定义的大文本。正文还指出,单独依靠颜色识别的链接可以使用 WebAIM 的 link contrast checker 进行评估;WAVE 则可以一次分析页面中所有文本元素的对比度。正文没有提供价格、免费额度或注册要求信息。

颜色对比度检测输入前景色和背景色后计算 Contrast Ratio,并显示不同内容类型的检测结果。
WCAG AA/AAA 判定分别检查普通文本、大文本、图形和用户界面组件是否达到相应的 WCAG 要求。
透明度与亮度调节支持输入 Alpha 值调整前景色透明度,并通过 Lightness slider 调整感知亮度。
基础 API在 permalink 后追加 &api 可获取包含对比度比例和 AA/AAA 状态的 JSON 对象。
Bookmarklet 取色检测通过 Bookmarklet 在任意网页中启动迷你版工具,并使用前景色和背景色取色器检测屏幕内容。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

Contrast Checker 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500