Color.review 是一款面向颜色与无障碍设计的在线对比度检查工具,核心用途是比较前景色和背景色之间的对比关系,帮助设计人员判断文本、标题和界面元素是否达到 WCAG 2.1 的可读性要求。它不仅显示当前颜色组合的对比度,还区分普通文本、标题与大号文字,以及未激活按钮和滑块等界面元素的最低要求。页面同时提供 RGB、HSL、CMYK、CSS 和十六进制等颜色表示方式,便于在不同设计工作流中查看颜色数据。
核心功能
前景色与背景色对比度检查
页面直接展示 foreground 和 background 两种颜色,并给出当前组合的 contrast 数值。用户可以围绕文本、标题和背景的组合查看颜色差异,示例页面显示当前对比度为 12。工具还提供 Flip 操作,用于切换前景色与背景色的位置。
按 WCAG 2.1 标准判断可读性
Color.review 使用 WCAG 2.1 标准进行颜色对比度评估,并区分 AA 与 AAA 两个等级。AA 对普通文本要求至少达到 4.5,对标题和大号文字要求至少达到 3;AAA 对普通文本要求至少达到 7,对标题和大号文字要求至少达到 4.5。页面还说明,大号文字包括 14 磅且通常为 18.66px、加粗或更大的文字,以及 18 磅且通常为 24px 或更大的文字。
检查界面元素对比度
除了文字内容,工具也涉及按钮和滑块等界面元素。官网说明,未处于激活状态的界面元素要求至少达到 3 的对比度,因此颜色检查并不只针对正文和标题,也覆盖数字产品界面中的相关控件。
查看多种颜色格式
页面提供 RGB、HSL、CMYK、CSS 和十六进制等颜色信息入口。前景色与背景色区域均可查看对应的 hex、rgb、hsl 和 cmyk 值,用户可以根据不同设计或开发场景读取颜色数据。
随机生成背景色与分享检查结果
页面提供 Change background 和 Random color 操作,也可以选择 White 作为背景色。工具还生成 Direct link,例如 color.review/check/293845-FFFFFF,可通过颜色组合对应的链接直接打开检查结果。官网另提到正在邀请用户尝试包含 swatches 和 eyedropper 等功能的 app,但正文没有进一步说明这些功能的具体使用方式。
使用方式
Color.review 通过网页界面使用。用户在页面中查看或调整前景色、背景色,使用 Flip、Random color、Change background 等操作,并读取对比度及颜色格式信息。官网提供可直接访问的检查链接,但没有说明是否需要注册,也没有提到客户端、浏览器插件、API、命令行或自备模型 Key。页面提到 app、swatches 和 eyedropper,但未说明其具体形态与开放状态。
适用人群与场景
进行数字设计的人员可以用它检查文字与背景的相对对比度;制作面向公众阅读的内容时,可以据此关注色盲用户和视觉障碍人群的可读性。需要按照 WCAG 2.1 检查 AA 或 AAA 要求的设计人员,也可以使用它区分普通文本、标题、大号文字和界面元素的最低对比度。官网将颜色对比度放在“designing for humans”以及数字工作场景下讨论,因此工具也适用于需要关注内容可读性的设计工作。