颜色对比度检测工具
颜色选择器与转换工具 的预设方案
对照 WCAG 2.1 标准,检查一种文字颜色在其背景上是否易读。对比度是网页上最常见的无障碍问题,同时也是最容易修复的——通常只需要把其中一种颜色调深一点。
- 文件永不离开你的设备
- 免费，无需注册
- 无水印
- 加载后可离线使用
如何颜色选择器与转换工具
- 1
选择一种颜色
使用色板,或直接输入 HEX 或 RGB 值。
- 2
复制任意格式
HEX、RGB、HSL、HSV 和 CMYK 会同时显示出来。
- 3
检查对比度
设置一个背景色,查看文字是否通过 WCAG AA 和 AAA 标准。
为什么对比度是网页上最常见的无障碍问题
自动化的无障碍审计一致发现,在被扫描的网站中,颜色对比度不足是单项出现频率最高的违规问题,超过了所有其他无障碍问题类别加起来的总和——而且和许多需要改动结构或语义标记才能修复的无障碍问题不同,一个对比度问题通常只需要把某种颜色稍微调深或调浅就能解决,完全不需要改动页面的结构、标记或设计布局。这种组合——极其常见,但一旦发现就相对容易修复——正是为什么值得在上线之前,直接用一个专门的对比度检测工具核对一组具体的颜色搭配,而不是依赖一次完整的无障碍审计事后才发现问题。
AA 和 AAA 标准,以及到底该用哪一个
WCAG 定义了两个符合级别,各自有不同的数值门槛,具体适用哪一个,既取决于一个项目所承诺遵循的级别,也取决于被检查的具体文字的大小。AA 级——大多数法律无障碍要求和机构政策所引用的级别——要求正常大小的文字达到 4.5:1 的比值,大号文字(定义为 18 磅或 14 磅加粗以上)则放宽到 3:1,因为较大的字形在较低对比度下依然保持可读,小字则不然。更严格的 AAA 级标准,把同样这两个门槛分别提高到 7:1 和 4.5:1。大多数项目把 AA 作为实用的基线目标;AAA 则专门留给特意面向视觉障碍较严重用户的内容,在那里,更严格的门槛所带来的额外设计约束是值得付出的。
常见问题
HEX、RGB 和 HSL 有什么区别?
HEX 和 RGB 用不同的记法描述同一件事——要混合多少红、绿、蓝。HSL 用色相、饱和度和明度重新表述,这要好推理得多:要让一个颜色变亮,只需要改一个数字,而不用去猜三个数字该怎么调。
对比度数值代表什么?
它比较两种颜色的相对亮度,范围从 1(完全相同)到 21(黑底白字)。WCAG 要求正常文字在 AA 级别至少达到 4.5:1,大号文字至少达到 3:1,到 AAA 级别则分别提高到 7:1 和 4.5:1。
为什么我看着挺好的颜色却没通过对比度检测?
因为这个比值是根据相对亮度计算的,而不是根据两种颜色看起来有多不同。两种明亮度相近的鲜艳颜色——比如红底上的橙色——看起来截然不同,但彼此之间几乎没有亮度对比,对视力较弱的人或者在阳光下的屏幕上会变得难以阅读。
CMYK 转换对印刷来说准确吗?
这是标准的算术转换,只是一个起点,而不是经过色彩管理的精确结果。真正的印刷工作需要针对具体印刷机和纸张的 ICC 色彩配置文件,因为 CMYK 本来就无法还原许多明亮的 RGB 颜色。