Material Design Text legibility 文本可读性

这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

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

目录

可读性标准文本背景文本类型

可读性标准

WCAG标准

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

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

文本背景

文本在有色背景上

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

有色背景或文本会因文本的不透明度和不同状态而另行改变规则。

使用文本不透明度

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

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

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

将颜色设置为黑色,在绿色背景前降低不透明度确定生成的暗绿色十六进制值将该颜色的十六进制值用于文本

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

5ocfbeoqbt3.png插图

3hnmlnjve5m.png插图(1)

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

l4pvpncqqnk.png插图(2)

a41wjlng20w.png插图(3)

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

深色文本在浅色背景上

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

重点强调的文本不透明度为87%中等强调的文本和提示文本不透明度为60%禁用文本不透明度为38%

oie4tya1qig.png插图(4)

有色文本和背景

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

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

vv4tbqgfxm2.png插图(5)

文本类型

帮助文本

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

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

重点强调色:十六进制值为#000000,不透明度87%默认色:十六进制值为#000000,不透明度60%默认错误色:十六进制值为#B00020,不透明度100%

4pnkf3eiwh5.png插图(6)

已选文本

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

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

如需了解更多对比(或试用颜色对比分析仪),请访问webaim.org

rasrkmefsra.png插图(7)

图标和其他符号

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

例如,深色图标(#000000)或一些显示在浅色背景(#FFFFFF)上的元素可以使用以下不透明度:

激活的图标,不透明度87%未激活的图标,不透明度60%不可用的图标,不透明度38%

qrx5k4vmb5j.png插图(8)

原文地址:Material Design

译者:招财鱼

人已赞赏
UI设计

关于瓷片区的笔记

2020-10-13 22:04:50

UI设计

Material Design Color usage 颜色用法

2020-10-13 22:04:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索