七色堂七色色块围合标志七色堂观察色彩 · 动手创作

COLOR NOTES / 可读性

七色堂:让配色清楚可读

先算文字与背景的对比度,再给状态和分类补上文字、形状或线型;好看的色卡还需要可用的组合。

先给一个直接回答

普通文字与背景可先按WCAG 2.2 AA的4.5:1阈值检查,符合大文本定义的文字为3:1。状态、链接或图表不能只用颜色传达意义。对比度检查是可读性工作的一部分,单个色对通过不代表整个页面符合WCAG。

先明确检查的是哪一对颜色

依据W3C对SC 1.4.3的说明,一般文字最低对比度为4.5:1;大文本为3:1,大文本通常指至少18pt,或至少14pt的粗体。临界值不能向上四舍五入后宣称通过。Logo、纯装饰等有特定例外,但不能据此豁免普通正文。原文链接列在文末。

检查时应读取文字的实际颜色和它正后方的背景色。带透明度、渐变或照片背景时,先确认最终合成颜色,并检查文字经过的较弱区域。给一张颜色很多的照片只取一个平均色,无法证明叠在它上面的整段文字都清楚。

六组可复算的数字示例

下表由sRGB色值按WCAG相对亮度公式计算,对比度展示保留两位小数;判断使用未四舍五入的结果。这些是纯色、不透明前景与背景的教学示例,没有测量读者设备,也不代表所有字号、字重和环境下的实际阅读体验。

前四组与本站可读性信息图使用同一色卡:墨色、米白、深青与赭橙。后两组来自文章中的阅读卡示例,便于比较不同配色在同一用途下的表现。

前景 / 背景对比度约值普通文字4.5:1使用建议
#17212B / #F3EBDD13.76:1达到浅底长文可用的候选
#FFFFFF / #243F4A11.14:1达到深青按钮白字候选
#C47742 / #F3EBDD2.92:1未达到赭橙不用于浅底普通文字
#FFFFFF / #C477423.46:1未达到换深底或另选普通文字色
#2F5D50 / #F4EBDD6.34:1达到浅底标题或正文候选
#6A73B6 / #F4EBDD3.75:1未达到不用于普通正文

让颜色承担辅助表达

W3C的SC 1.4.1要求,颜色不能成为传达信息或区别元素的唯一视觉手段。原创示例:把“红色为未完成”改成“○ 未完成”,把“绿色为完成”改成“✓ 已完成”;颜色保留,但文字和形状也表达同样意思。折线图可直接标注名称并使用不同线型。

对于识别控件、状态和理解图形所必需的视觉信息,SC 1.4.11通常要求与相邻颜色达到3:1,并有非活动控件等例外。不是每条装饰线都必须达到该阈值,也不应只检查按钮文字就忽略必要的状态标记。具体适用范围见W3C原文。

按真实页面检查四种状态

先列出正文、次级说明、链接、按钮和表单提示,再检查默认、悬停、键盘聚焦与选中状态。选择一处浅色标签作为练习:若字太浅,可先加深文字,或换到较深底色;不要仅把字加粗就假定问题已解决。修正后重新计算相应色对。

  1. 记录前景和最终背景色,确认是否存在透明叠加。
  2. 按实际字号和字重选择对应阈值,用完整精度比较。
  3. 给分类、状态与错误信息补上可见文字、图标或线型。
  4. 在手机尺寸和放大文字的情况下阅读;用键盘检查聚焦位置是否清楚。

常见问答

一个颜色本身能被称为无障碍颜色吗?

不能脱离背景和用途判断。相同暖金在深底上可读,在白底上可能不足;还需要知道字号、状态和信息是否仅靠颜色区分。

灰度截图看得清就一定合格吗?

不能。灰度预览是观察明暗层级的辅助方法,不能替代对比度计算、语义标记、键盘操作及其他适用的可访问性检查。

参考资料

下列资料支持文中的标准说明;站内色卡、版式与练习为七色堂原创示例。

接着做一个练习