WCAG色彩无障碍设计

一、什么是WCAG？

WCAG （Web Content Accessibility Guideline）《无障碍网页内容指南》是万维网联盟(W3C)无障碍网页倡议组织(WAI)发布的一系列无障碍网页指南中的一部分。

在WCAG 2.0中定义了文本呈现的对比度，就是文字与背景色两个颜色之间的对比度数值。

比如上面👆标签中：文字色色值为#FFFFFF，背景色色值为#2334FF，将这两个色值输入到对比度测算网站中，就可以获得一个对比度值。

对比度测算网站：https://webaim.org/resources/contrastchecker/

通过测算网站计算得出该文字和颜色的对比度为6.98

二、如何衡量对比度的好坏？

在WCAG中主要定义了2个标准：AA级和AAA级。AAA级比AA级的要求更苛刻，比如同样14px的小字号，想要达到AA级，对比度至少为4.5:1，如果想要达到AAA级，对比度至少为7:1。比如上面的案例中，对比度为6.98:1，14px字号的情况下，就达不到AAA级标准。

三、AA级标准及AAA级标准字号对照表

在WCAG中还专门定义了小字号和大字号下的两个标准分别应该达到哪些对比度：

界面设计中最常用的2个数值

通常来说：界面中字体是低于18pt的Normal状态，按照AA级标准，要达到4.5:1；大于18pt以上要达到3:1。这也是日常界面设计中最关注的两个数值。所以日常在做界面时，如果发现界面中文字太弱的情况，要及时进行对比度测算，然后调整颜色色值，让用户「看得清」，不然真的会极大地拉低产品的用户体验。

四、Figma插件推荐 —— 快速测算对比度

Stark Accessibility Tools

直接吸取页面中的颜色帮助计算，很方便！

作者：陈婉宁，公众号：婉宁交互设计

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！