WCAG中色彩对比度的七大误区

我们总是期待更多的用户使用我们的产品,当用户量增长到一定规模时,无障碍设计就显得尤为重要。但目前有很多关于色彩对比度可访问性的原则被错误使用。

他们常不加思考的使用这些标准,而不是作为设计决策的一种依据。


误解1:WCAG要求对比度始终保持最佳效果

Web可访问性指南(WCAG)是一套用于确定可访问性色彩对比度的标准原则,然而,这些标准在实际应用中并不总是有效的。你应该使用它来指导你的设计决策,而不是完全的照搬使用。

WCAG标准不适用于白色文本的对比。下面的两个按钮都有蓝色背景,但一个是白色文本,一个是黑色文本。当你调研用户哪个按钮更容易阅读时,大多数用户会告诉你白色文本的按钮更易阅读,但是WCAG色彩对比度显示白色文本比率却不合格。

黑色文本的对比度为5.41,符合要求。然而,白色文本的对比度是2.94,这是不合格的。根据WCAG比率来看,白色文本按钮可阅读性不强,但实际上它更易阅读。

研究表明:正常视觉用户发现白色文本更易阅读,该原则同样适用于色盲用户。

这种误差同样发生在橙色背景上,白色是没有色调/饱和度的纯亮度,是对比度最强的。高亮度背景上的高亮度文本在计算时是呈低对比度的。但视觉上白色文本的按钮更易阅读是有道理的。

设计应该满足人们看到的,而不是计算的结果。这就是为什么设计师的眼睛总是在方程式外扮演着另一个角色。


误解2:文本必须符合3A标准

有人认为,所有文本必须符合最高级别的AAA标准,否则大部分用户将无法访问它。这种说法是错误的!

3A最小比率为:7:1,以补偿20/80视觉障碍的用户对比度缺失。但这些用户大多数都佩戴了眼镜来弥补视觉的障碍,所以3A的要求只适用于没有佩戴眼镜且有视力障碍的用户。

研究表明:低视力也与衰老有关,大部分人在70岁时视力开始下降,如果你的用户群是70岁以上,满足一些3A标准可以提升他们的阅读效率。

对于大多数用户来说,满足AA就足够了。2A要求对比度比率为4.5:1,以补偿20/40视觉障碍的用户对比度缺失。研究发现:大多数人在80岁时至少保持着20/40的视觉敏锐度。这一发现表明,满足2A的文本也可供大多数用户识别。


误区三:界面组件与文本具有相同的对比度标准

许多人认为组件与文本应保持相同的对比度标准,这是错误的!

组件的对比度为3:1,而文本为4.5:1。文本需要更高的对比度,因为用户需要阅读它,而组件不需要读取。

许多细微差别会影响文本对比度,比如字体大小和粗细。大文本(18pt或14pt粗体)可以使用较低的比率。不仅如此,某些组件也不受此要求的约束。在将界面组件或文本保存到标准比率之前,请确保在正确的情况下正确使用它。


误区四:灰色文本和按钮不可访问,看起来是禁用态

灰色文本是禁用态,不可访问无法阅读,这是错误的!

许多人认为用户无法阅读灰色文本,因为它看起来对比度很低。比如下面的按钮有灰色文本,有些人认为它是禁用态。不过,通过对比度计算显示,它远高于2A标准。

此标准还意味着,只要文本标签满足4.5:1的比率,按钮旁边的图标就没有对比度要求。

灰色按钮被用户习惯的认为是禁用态,当一个按钮很难阅读时,用户不必费心去阅读,这就是禁用按钮的目的,更不用说对比度了。


误区五:色盲用户分不清对比色

假如一个设计是使用颜色对比来传达信息的,色盲用户不会注意到差异,这是错误的!

颜色色相和颜色对比度是两个不同的维度,色盲用户难以区分特定的颜色色相,并不难区分颜色对比的差异。按钮可以只使用一种颜色,并有足够的对比度差异就可以了。

当颜色是绿色和红色时,且保持着相同亮度时,色盲用户很难注意到颜色的对比度,如下图示例,色盲用户几乎看不出有什么差异。


色盲有多种类型,但你最应该关注的是红绿色缺陷的用户,99%的色盲人群属于红绿色色盲。

误区六:光用颜色不足以传达信息

这是错误的!

颜色不应作为传达信息、指示动作或区分元素的唯一视觉手段。然而,本标准仅适用于不同颜色被赋予特定含义以通知用户的场景。换句话说,如果你使用颜色差异来传达信息,你需要一个额外的提示。但是如果你用明暗来传达信息,你不需要额外的提示,只要对比度差足够大也可以。

如下图toggle使用蓝色表示可交互态,但没有指定给蓝色的特定含义,可通过颜色对比度来传达信息。

颜色被赋予含义的另一个例子是表单字段上的错误提示。红色通常用于指示文本字段中的错误提示。在这种情况下,红色不足以指示错误状态,因为色盲用户看不到它。因此,你需要一个额外的提示,例如文本或图标,以指示错误状态。

另一个例子是使用颜色来表示页面上的系统状态。绿色和红色常被用来表示系统问题的严重性。在这种情况下,“颜色的使用”要求是适用的,因为颜色被赋予了特定的含义。但需要图标来帮助色盲用户区分每个系统状态。

误区七:无障碍设计需满足所有用户需求

这是错误的!

每个设计师都希望能满足所有用户的需求。尽管设计师们一直在努力做到这一点,但即使你遵循了WCAG的每一个要求,也不可能做到这一点。总有一些用户会发现你的设计让他们感到不安。

与其基于无法实现的幻想去追求理想,不如基于可实现的现实去追求理想。现实情况是,一个好的可访问性的设计不能满足每个用户的需求,但它可以满足尽可能多的用户的需求。


色彩对比度可访问性的细微差别

在为用户设计时,可访问性应该始终是重点关注点。WCAG指南是帮助你实现最高标准的可访问性设计的有效工具。

了解色彩对比度可访问性的细微差别将帮助你准确地满足WCAG标准。全面了解WCAG指南的使用,可以保持视觉上的简洁和美观,同时平衡它们与可访问性的关系。



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343