可读设计 · 原创色彩笔记

粉嫩背景的文字对比度

用一对具体色值演示对比度,避免浅底白字带来的阅读问题。

原创配色图解:主题色、背景色和深色文字色的并列比较;具体色值见图中标注。
配色关系示例;色名是识别标签,图中 HEX 是具体屏幕色值。

对比度检查什么

文字对比度比较前景与实际背景的相对亮度。按 WCAG 2.2 AA,普通文字最低为 4.5:1,大号文字最低为 3:1;大号通常指至少 18pt,或至少 14pt 的粗体。装饰与标志等另有例外,不能把所有小字都按大字阈值处理。

本站色值计算示例

深梅棕 #513541 配浅粉 #F8DDE6 的计算结果约为 8.51:1;白色 #FFFFFF 配同一浅粉约为 1.27:1。前者适合继续作为正文候选,后者不能通过普通文字阈值。这是针对不透明纯色的计算,不等于整页已经通过无障碍评估。

渐变与照片怎么办

文字跨过多种底色时,不能只挑最有利的位置计算。可以为正文增加稳定的纯色底,或把字移到清楚的区域。修改阴影并不自动解决问题,仍要考虑字形、字号和实际背景。

一次可执行的检查

记录文字与背景 HEX,计算比值,再确认字号是否符合使用的阈值。接着检查链接、按钮、说明和错误提示。检查时保留未四舍五入的原值,不能把低于阈值的结果通过显示取整变成“合格”。

依据与延伸阅读

上述来源支持文中的技术概念;应用建议与色板是本站原创示例。