WCAG标准
所有文本应该清晰可读并符合可访问性标准。“WEB内容可访问性内容指南(WCAG 2.0)”AA级对普通文本与背景颜色对比要求为4.5:1,对于大号文本是3:1。
文本背景
黑色文本推荐在浅色背景上使用,白色文本推荐在深色背景上使用。如果应用程序同时具备浅色和深色主题,请确保文本应用在颜色相对的主题上。
有色背景或文本会因文本的不透明度和不同状态而另行改变规则。
不要在有色背景上使用灰色文本和图标,通过降低透明度来显示白色或黑色文本可形成更好的对比。
有色文本应少量使用以吸引关注和选择性突出。理想情况下的有色文本应该为标题、按钮或链接等元素保留使用。
文本类型
- 帮助文本
帮助文本给出有关字段的输入场景,如应使用怎样的输入方式。它可以使用品牌色,但应该遵循WCAG中的可读性标准。
例如,帮助文本在浅色背景上可使用以下不透明度和默认的十六进制值:
- 重点强调色:十六进制值为#000000,不透明度87%
- 默认色:十六进制值为#000000,不透明度60%
- 默认错误色:十六进制值为#B00020,不透明度100%
- 已选文本
为展示品牌,文本选择可使用主色或辅助色来作为重点强调。
已选文本应该在所选颜色上清晰可读,所选颜色也应与背景色有鲜明的对比。或者,你也可以通过显示轮廓、动画、复选标记或者其它文本处理方式来表明选中的文本。
- 图标和其他符号
图标和其他元素不一定要符合WCAG可读性标准,但也应尽可能明显地表示出其功能或所传达的信息。
例如,深色图标(#000000)或一些显示在浅色背景(#FFFFFF)上的元素可以使用以下不透明度:
- 激活的图标,不透明度87%
- 未激活的图标,不透明度60%
- 不可用的图标,不透明度38%