WCAG 2.1对于颜色对比度的相关准则

一、WCAG是什么？

WCAG（Web内容可访问性指南），是通过W3C流程与世界各地的个人和组织合作开发的，为了满足国际个人、组织和政府对于Web内容可访问性的需求提供了单一共享标准。WCAG解释了如何让残障人士更容易访问Web内容。

二、WCAG里用色建议的目的是什么？

通过在文本和背景之间提供足够的对比度，让弱视人群（不使用增强对比度的辅助技术）可以阅读该文本。对于没有色盲的人，通过阅读性能评估，色相和保护度对可读性的影响很小或者没有影响。

三、WCAG相关准则

对于WCAG 2中的每一条指南，都有可测试的成功标准。成功标准分为三个级别：A（最低级别）、AA、AAA。不建议将AAA级一致性作为整个站点的一般政策要求。

准则1.4.1颜色的使用（A级）

颜色不被用作传达信息、指示动作、提示响应或区分视觉元素的唯一视觉手段。

一些用户难以感知颜色。有部分视力的人通常会遇到有限的色觉，许多老年用户看不清颜色。在设计时，可以增加状态文本或者Icon传达信息。

准则1.4.3对比度（AA级）

• 文本和文本图像的视觉呈现具有至少4.5:1的对比度。
• 大文本的大文本图像的对比度至少为3:1。

（大文本定义：18 点（24px）文本或 14 点（18.5px）粗体文本被判断为大文本）

例1.

如图可以看到，对比度符合AA级4.5:1的看起来会更清晰一些。符合AAA级对比度7:1的看起来更清晰。

例2.

虽然图2的对比度比图1稍大一点，但是看起来，第二个看起来会更费劲一些。所以在实际设计时，满足设计要求后应尽可能的提高对比度。

WCAG中提到，当字母周围有边框时，边框可以增加对比度。

没有对比度要求的情况：

1.作为非活动用户界面组件的一部分文本，例如不可点击的组件

2.装饰性文本——没有实际意义

3.不可见文本——想要隐藏的文本

4.品牌名称或者Logo

准则1.4.6 对比度增强（AAA级）

• 文本和文本图像的视觉呈现具有至少7:1的对比度。
• 大尺寸文字和大尺寸文字图像的对比度至少为4.5:1。

准则1.4.11非文本对比度（AA级）

• 视觉呈现与相邻颜色的对比度至少3:1。

不包含：禁用组件或者用户自定义组件

此准则的目的是确保活动的用户界面组件（即控件）和有意义的图形可以被中等视力的人区分。

例1.输入框边框和背景色的对比度不足3:1，看起来是比较吃力的。

例2. 复选框和背景色的对比度不足3:1，调整之后是满足对比度条件的。

颜色对比度计算网站：

https://color.adobe.com/zh/create/color-contrast-analyzer

https://leonardocolor.io/index.html?colorKeys=%2320bec8&base=ffffff&ratios=4.5&mode=RGB

https://arco.design/palette/wcag?background=dcdee2&front=f5f5f5

四、线上产品分析

例1.飞书管理后台

按钮，搜索框，标签都不符合WCAG原则。

例2.Canvs

主按钮符合。

次按钮文字和按钮的对比度符合，但是按钮和背景色之间的对比度不符合，Canvs也对于次按钮增加了描边处理增强对比度。

五、产品运用

由于大多数线上产品是达不到WCAG标准的，所以在实际项目运用上，可以针对不同产品定制产品自己的对比度原则。对比度制定原则：尽量符合WCAG原则，如果不能符合，可适当调整。对比度标准主要运用为部分组件，例如：

1.主按钮

2.次按钮

3.默认搜索框

4.默认输入框

5.默认下拉框

6.Checkbox 默认样式和选中样式规则

7.标签对比度规则

8.Message

9.Alert

10.其他等

六、总结

实际工作中，还需要结合实际场景，针对不同的组件建立自己产品的对比度规则，在美观和易用之间找到平衡。