检查 AI 图片上的文字对比度时,要针对每种版式测量字母或汉字正下方的背景。先看最窄的裁切版本,因为标题更容易换行或碰到高光。保持文字可编辑,再移动标题、局部压暗背景,或加纯色底板。最后用实际的文案和字体再检查一遍。
给不同字号设定目标
针对网页内容,W3C 对 WCAG 2.2 AA 级的说明规定,普通文字的对比度至少为 4.5:1,符合定义的大号文字至少为 3:1。用了标题样式并不代表字号达标,还要看实际显示的大小和字重。标题下的小字可能仍需达到 4.5:1。这些是最低值,留出余量能让内容更容易一眼读清。
测量文字实际覆盖的背景
设想一张陶艺工作坊横幅:右侧是浅色花瓶,左侧是深蓝色墙。桌面版的白色标题完全落在蓝墙上。手机上使用较矮的裁切,图片移动后最后一行落入浅棕色光斑。取整张图的平均色会漏掉这块区域。在目标尺寸的预览中临时隐藏文字,保留图像及其遮罩。对文字正下方取样,尤其注意白字后的亮处。计算时用指定的文字颜色,避开经过抗锯齿处理的文字边缘像素。
对照最强和最弱的位置
用示例色计算,纯白对深蓝 #253343 约为 12.86:1,对浅棕 #B9A78E 约为 2.34:1。这些是示例色,并非封面采样。深蓝超过普通文字的最低值,浅棕则低于两个门槛。以最终尺寸阅读整行,检查有文字的地方最低对比度是多少。遇到纹理或明显边缘时,多取几个点。
选择适用于不同裁切的方案
先尝试把标题移到相对稳定的位置,并为更长的译文留空间。如果图片必须铺满局部版面,可以用渐变只压暗文字附近,让花瓶保持明亮。加完后重新测量最弱位置。如果标题经常换位置或图片频繁更换,可用纯色底板,或者把文字放到图外。纯白对 #222222 色块约为 15.91:1。底板会遮住部分照片,构图时要留位置。
用交付版本再检查一次
预览最宽、最窄的版式和更长的译文,也检查标题下会换行的说明文字。保留可编辑的标题,并将裁切和遮罩设置与最终设计一起保存。测量方法见 W3C 的说明 和 G18 技术指南,裁切方案可参考 Tong 的活动配图裁切指南,其他图像工作流程见 Tong Academy。
来源与延伸阅读
- W3C: Understanding Contrast (Minimum)
- W3C Technique G18: Text contrast against its immediate background
本文在 AI 辅助下创作,来源链接见上方。
