理解WCAG中对于颜色与对比的要求

来源:设酷网     作者:日期:2020-08-28     浏览:155    评论:0    
  
核心提示:一、介绍对比度和颜色对于页面的可访问性十分重要,有时候我们只能凭借主观感受去判断颜色和对比度的可读性如何,但即使是同一个颜色在不同用户端受显示设备色域,分辨率等影响显示效果大不相同,因此我们需要一个相对科学的标准去检验颜色和对比度的可读性。此外,在设

一、介绍       

      对比度和颜色对于页面的可访问性十分重要,有时候我们只能凭借主观感受去判断颜色和对比度可读性如何,但即使是同一个颜色在不同用户端受显示设备色域,分辨率等影响显示效果大不相同,因此我们需要一个相对科学的标准去检验颜色和对比度可读性。此外,在设计页面时,应该尽可能的让视觉障碍的用户感知到页面上的内容

      在WCAG 2(WEB Content Accessibility GUIdelines)WEB内容无障碍指南中,有一系列关于在使用对比度和颜色的准则,光看这些文档会让人感到困惑,这里将这些复杂的准则加以归纳总结。


二、颜色的定义

网页前端样式中一般有以下3种方式定义颜色:

1.英文单词:

用英文单词来表示一种颜色,但这里的英文单词,不能完全描述所有的颜色。

2.RGB模式:

基于自然界中3种基色光的混合原理,将红(Red)、绿(Green)和蓝(Blue)3种基色按照从0(黑)到255(白)的亮度值在每个色阶中分配,从而产生特定的色彩

3.十六进制的RGB值:

使用三组两位的十六进制字母数字组合代表一个颜色,每组颜色的范围是 00~ff,第一组代表红色的浓度,第二组代表绿色的浓度,第三组代表蓝色的浓度。


不透明度是影响对比度的另一要素:

不透明度也会影响颜色的对比度,前端样式中opacity属性值从 0.0 到 1.0表示从完全透明(0.0)到完全不透明(1.0) ,降低颜色的opacity值底层背景颜色会穿透,因而元素的对比度降低。


三、WCAG中关于颜色与对比度的解析:

在WCAG 2中,对比度是两种颜色之间感知到的亮度差异的对比

计算方法为:

(L1 + 0.05)/(L2 + 0.05),其中

  • L1是颜色较浅的相对亮度

  • L2是颜色较深的相对亮度

该亮度差被表示为从1:1(例如,白色背景上的白色文本)到21:1(例如,白色背景上的黑色文本)的比率

注:如果文本与背景颜色对调,对比度保持不变


这里提供几个计算颜色对比度的链接:

http://jUIcystudio.com/services/luminositycontrastratio.php

https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333

http://www.msfw.com/Services/ContrastRatioCalculator

https://WEBAim.org/resources/contrastchecker/


1.4.3 对比(最低)Contrast (Minimum)-Level AA

1) 文字与背景的对比度至少为4.5:1

下面这两个案例背景与文字对比度都是4.5:1,从我个人的主观角度看案例1文字的清晰度一般,而案例2需要非常费力地去辨识文字。由此推断,这个对比度下视力障碍用户阅读起来是有困难的。


当然,实际网页设计时应当在满足其他条件的情况下尽可能提高对比度,虽然文档中4.5:1是临界点,但4.6:1同样会给可读性造成影响。


2) 文字效果(如轮廓)可能会影响对比度。WCAG 2提到,可以将文本轮廓或边框的颜色作为前景色与背景对比。下图中,两种样式对比度相同

3)文字周围的文本光晕可以用作背景色来与文字对比。下图中,两种样式对比度相同

其他情况(不需要满足4.5:1):

1)大文本:

大文本更易于阅读,对比度要求降低到3:1。WCAG定义的大文本是18pt以上,或14pt粗体以上(前端样式中18pt=24px,14pt=19px)。

2)次要信息

  • 失效状态:例如Disable状态下的按钮

  • 纯装饰性文字:没有实际意义,只用作装饰

  • 不可见文本:有意隐藏的文本

  • 拥有除文字以外其他重要视觉信息的图片:不作为图像信息中重要文本的存在

3)品牌名或logo


1.4.6 对比(增强)Contrast (Enhanced)-Level AAA

AAA级的通过标准要高于AA级,正常文本的对比度要达到7:1.大文本对比度要达到4.5:1。正常情况下网站满足Level AA级别便可。


1.4.11 非文本对比 Non-text Contrast

WCAG 2.1于2018年6月发布一项新的成功标准增加了除文字以外的对比要求:

以下两种情况下与相邻颜色的对比度至少为3:1

1.)界面组件:用于识别界面组件及其状态的视觉信息,除了一些禁用状态,或用户自定义的组件

2.)图形对象:用于识别内容的图形,除了一些图形用来表示指定信息

这里对比原则的应用存在一定差异。相邻颜色意味着需要在多个位置测量对比度

案例:

1.白色勾与蓝色背景的对比度为2.93:1,小于3:1

2.蓝色选框与灰色底对比度为2.7:1,小于3:1

该样式不符合1.4.11标准


1.4.1 颜色的使用  Use of color-Level A  

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

案例:

表单中经常使用颜色表示输入框的状态

单靠红色或绿色边框提示输入框的验证状态是不够的,视觉障碍用户对此有可能无感知,因此如下图所示,表单中还需要一个图标或文字提示


四、想法

1.目前普遍被接受的设计样式(如1.4.11非文本对比中的案例)与WCAG中一些准则相背亦或是难以满足其要求,设计师应该朝着更符合用户认知的方向走,不能执着于数据。


2.WCAG中涉及文本的研究都是基于西文字母进行的,由于中文字体西文字体在结构上差异巨大,这部分文本方面的准则在应用到中文上时应该会有所变化(例如定义大文本时的字号),但参考价值依然巨大。



附WCAG的原文链接,有兴趣的小伙伴可以更全面的了解:https://www.w3.org/WAI/WCAG21/qUIckref/versions=2.0&showtechniques=141%2C143%2C144%2C145#distinGUIshable

原文链接: https://mp.weixin.QQ.com/s/qtbjI2sa3QbuEHxYgvZrdg

本文来源:理解WCAG中对于颜色与对比的要求    http://www.sjschina.com/archives/21059.html
相关评论