6.4 文本可读性

文本可读性

颜色在文本可读性中扮演了重要角色。

目录

可读性标准

文本背景

文本类型

可读性标准

WCAG标准

所有的文本应该清晰可读并符合可访问性标准。“WEB内容可访问性内容指南（WCAG 2.0）”AA级对普通文本与背景颜色对比要求为4.5:1，对于大号文本是3:1。

如需了解有关颜色、对比和可访问性设计等更多信息，请参阅“Material Design 无障碍访问”

文本背景

文本在有色背景上

黑色文本推荐在浅色背景上使用，白色文本推荐在深色背景上使用。如果应用程序同时具备浅色和深色主题，请确保文本应用在颜色相对的主题上。

有色背景或文本会因文本的不透明度和不同状态而额外调整规则。

使用文本不透明度

不要在有色背景上使用灰色文本和图标，通过降低透明度来显示白色或黑色文本可形成更好的对比。

例如，在绿色背景上显示不透明度75%的黑色文本，除使其呈现黑色外观外，还有一丝淡淡的绿色。

或者，你也可以通过执行以下操作来计算出文本颜色值：

• 将颜色设置为黑色，在绿色背景前降低不透明度

• 确定生成的暗绿色十六进制值

• 将该颜色的十六进制值用于文本

这种情况下，如果文本后的表面颜色改变了，你还必须同时更新那个十六进制值。

正确示例

在有色表面上使用黑色半透明体来保持可读性。

错误示例

避免在有色表面上使用不易辨识的不透明灰色文本。

深色文本在浅色背景上

深色文本在浅色背景上（这里可表示为#000000在#FFFFFF上）可使用以下不透明度：

• 重点强调的文本不透明度为87%

• 中等强调的文本和提示文本不透明度为60%

• 禁用文本不透明度为38%

有色文本和背景

有色文本应少量使用以吸引关注和选择性突出。理想情况下的有色文本应该为标题、按钮或链接等元素保留使用。

使用Material颜色工具可判别文本上的前景色在背景色上是否符合可访问标准。

正确示例（绿色）

大标题和短文本适合有色文本。

谨慎使用（橙色）

有色长文本会造成阅读困难。

文本类型

帮助文本

帮助文本给出有关字段的输入场景，如应使用怎样的输入方式。它可以使用品牌色，但应该遵循WCAG中的可读性标准。

例如，帮助文本在浅色背景上可使用以下不透明度和默认的十六进制值：

• 重点强调色：十六进制值为#000000，不透明度87%

• 默认色：十六进制值为#000000，不透明度60%

• 默认错误色：十六进制值为#B00020，不透明度100%

已选文本

为展示品牌，文本选择可使用主色或辅助色来作为重点强调。

已选文本应该在所选颜色上清晰可读，所选颜色也应与背景色有鲜明的对比。或者，你也可以通过显示轮廓、动画、复选标记或者其它文本处理方式来表明选中的文本。

如需了解更多对比（或试用颜色对比分析仪），请访问webaim.org

1. 文本

2. 已选文本的颜色

3. 背景

文本选择可使用调色板中的强调色来自定义。（右图）

图标和其他符号

图标和其他元素不一定要符合WCAG可读性标准，但也应尽可能明显地表示出其功能或所传达的信息。

例如，深色图标（#000000）或一些显示在浅色背景（#FFFFFF）上的元素可以使用以下不透明度：

• 激活的图标，不透明度87%

• 未激活的图标，不透明度60%

• 不可用的图标，不透明度38%

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考