社交媒体的色彩对比度：把 WCAG 规则落到实处

社交帖子上的文字与背景的对比度至少要达到 4.5:1，如果是大号文字则为 3:1。这就是 WCAG 1.4.3 的数值，W3C 的表述是：普通文字 4.5:1，18 磅及以上或 14 磅加粗的文字 3:1。WCAG 是为网页内容制定的，所以把它用到你的 Instagram 或 LinkedIn 图片文字上，是我们的建议，而不是平台规则。

下面依次介绍：计算公式、WCAG 各等级的要求，以及我们对演示品牌 AURORA 真实渲染图的实测对比度。想了解更完整的体系，请看我们的小团队品牌规范指南。

WCAG 适用于社交媒体图片吗？

不直接适用。WCAG 管的是网页内容，而信息流里的帖子是别人应用里的一张图片。不过有两条准则使它成为合理的参照。1.4.3 明确把“文字图片”当作文字对待，所以烘焙进 PNG 的标题与真实文字适用同样的比值。而 1.4.5 Images of Text（AA 级）更倾向于使用真实文字而非文字图片，除非呈现方式是必需的，或图片可由用户自定义，标志字样就是典型例子。

根据我们的经验，社交网络很少允许在图片上方发布真实文字，所以 1.4.5 是一个诚实的保留意见：带文字的图片本身就是一种折中。我们的建议是：文字写短，在文案中重复关键信息，补上替代文本，并且无论如何都让像素满足 1.4.3。

各等级分别需要多高的对比度？

准则	等级	普通文字	大号文字	适用对象
1.4.3 Contrast (Minimum)	AA	4.5:1	3:1	文字和文字图片
1.4.6 Contrast (Enhanced)	AAA	7:1	4.5:1	文字和文字图片
1.4.11 Non-text Contrast	AA	3:1	3:1	理解内容所需的界面组件和图形

实践中有三个细节要注意：

• 不四舍五入。 W3C 指出计算值不做舍入，所以 4.499:1 达不到 4.5:1。
• 豁免项。 标志字样、纯装饰性文字、未启用的控件，以及带有其他视觉内容的照片中的附带文字，都在豁免之列。
• 图形。 按 1.4.11，承载含义的图标、图表线条或按钮轮廓与相邻颜色之间需要 3:1，而图形内部的文字则按 1.4.3 评判。

大号文字是以磅为单位定义的，而 PNG 没有磅。我们对 1080 px 图片的工作假设是：在手机屏幕上明显偏大的标题算大号文字，其余一切，尤其是小号的眉标和页脚，都按需要 4.5:1 的普通文字处理。

对比度是怎么计算的？

公式来自 WCAG 的定义。先把每个 8 位通道换算到 0 到 1，再做线性化（数值不大于 0.04045 时除以 12.92，否则对 (数值 + 0.055) / 1.055 取 2.4 次方），然后加权：相对亮度 L = 0.2126 R + 0.7152 G + 0.0722 B。对比度为 (L1 + 0.05) / (L2 + 0.05)，其中 L1 为较亮的颜色。纯白对纯黑是 21:1，也就是最大值。

绿色通道的权重最大，所以亮绿和黄色看起来很亮，一个饱和的绿色也可能显得醒目却在白底上不达标。WebAIM 也有同样的观点：对比度取决于亮度差，而不是色相差。

达标的渲染图实测结果如何？

我们按原始尺寸渲染了 AURORA 演示品牌的四个模板，并用上面的公式，根据品牌色板的数值以及从 PNG 中采样的像素计算了对比度。

近黑色 #0A0A0A 在米白色 #FAFAF7 上实测为 18.93:1。页脚的灰色小标签使用 #6F6F6F，其采样像素与背景的对比度为 4.81:1。这以微弱优势超过 4.5:1，而且文字很小，所以这是这张帖子上我们唯一会继续留意的元素。

这一张把近黑色与两种不同的浅色底搭配。标题、PASS 小标签，以及黑色胶囊上的米白色文字，在采样像素中都是 18.93:1。AURORA 小字标位于绿色块上，近黑色在绿色 #00D084 上为 9.76:1。绿色适合作为深色文字的底色，却不适合作文字本身的颜色；反过来的组合，近黑色底上的绿色，由于公式的对称性，同样是 9.76:1。

渐变上的文字没有单一的对比度，所以要测最差的那个位置。WebAIM 指出，WCAG 没有给出渐变的测量方法，并建议测试对比度最低的区域。这里的标题位于磨砂卡片上；我们对它下方每一个背景像素采样，测到的最低对比度约在 15 到 17 之间，位于偏绿区域上方的眉标小字则接近这个范围的下限。

不透明度同样会降低对比度。这个模板把正文设为 75% 不透明度；混合后的文字颜色在桃色背景上实测超过 7:1，仍然远高于 4.5:1。

文字	背景	对比度	4.5:1	3:1
近黑色 #0A0A0A	米白色 #FAFAF7	18.93	通过	通过
柔灰色 #6F6F6F	米白色 #FAFAF7	4.81	通过	通过
近黑色 #0A0A0A	绿色 #00D084	9.76	通过	通过
绿色 #00D084	近黑色 #0A0A0A	9.76	通过	通过
渐变卡片上的标题和眉标（采样最低值）	磨砂渐变	约 15 到 17	通过	通过
75% 不透明度的正文	桃色到粉色渐变	超过 7	通过	通过

我们色板里哪些组合不达标？

四张渲染图全部通过，是因为模板的颜色被锁定在一套只检查过一次的色板里，而不是每次有人写帖子时都检查。我们没有渲染不合格的帖子：引擎从不让成员选出糟糕的颜色，这正是它的意义。但同一套色板里确实存在一旦被使用就会不达标的组合，用同样的公式算出如下：

文字	背景	对比度	4.5:1	3:1
白色 #FFFFFF	绿色 #00D084	2.03	不通过	不通过
米白色 #FAFAF7	绿色 #00D084	1.94	不通过	不通过
绿色 #00D084	米白色 #FAFAF7	1.94	不通过	不通过
橙色 #FF6B35	米白色 #FAFAF7	2.71	不通过	不通过
柔灰色 #6F6F6F	粉色 #FFB3D1	3.02	不通过	通过

白字配绿底这一行是常见的陷阱。明亮品牌绿上的白字在好显示器上看着没问题，却差了一大半。明亮的强调色更适合作为深色文字的底色，就像上面渲染图里的绿色块那样。

如何检查你自己图片的对比度？

1. 写下模板中每一组文字与背景的搭配，包括标签、页脚和按钮文字。
2. 用上面的公式或任意 WCAG 对比度检查工具计算每个比值，使用准确的十六进制色值，而不是压缩图片的截图。
3. 普通文字按 4.5:1 要求。只有在手机上明显偏大的文字才可放宽到 3:1。
4. 对渐变或照片上的文字，测量文字下方最差的点，或者在后面放一块纯色或半透明的底板。
5. 检查不透明度：60% 的文字颜色已经是另一种颜色。
6. 不要只靠颜色来传达含义，例如用红绿区分好坏（WCAG 1.4.1 Use of Color）。
7. 在品牌色板变化时重新检查，而不是等到写帖子的时候。

哪些文字算大号文字由字体排印决定，所以接下来请阅读我们的社交媒体帖子字体排印指南，并参考我们的社交媒体图片版式原则了解如何在复杂区域上放置文字。如果想把检查直接放进工作流程，Chikaboom 会锁定模板颜色，成员只需填写文字而不会改动颜色；你可以在在线演示中试用。