界面的色彩对比

在这个世界上估计有2.85亿人是有视力障碍的. 这个数字包括法定盲人,视力低于20/20的人。

本短文写于对比度MacOS应用程序期间,可帮助实现WCAG 2.0中列出的可访问性标准,特别是涉及数字屏幕文本的前景和背景色。

TL;DR

Fail— 你的文字在背景下没有足够的对比度. 你可能想要更深的颜色. 对比值小于3.0.

AA Large— 大于等于18px是最小可接受对比度. 对比值至少是3.0.

AA— 这是低于〜18px的文字大小的最佳选择. 分对比值至少 4.5.

AAA— 至少 7.0是增强版对比. 在阅读时遇到重要的片段需要思考更长的时间.

装饰性元素或者logo里包含的文字部分或者品牌名字没有最低对比度要求。

为了完全符合AA和AAA标准,还有其他一些因素需要考虑,但这是好的开始

分数和比率

WCAG(网页内容无障碍指南)提供了一个公式,它取决于这两个值。

1.分数

2.比例

该公式输出0到21之间的数字,其中21是对比度最高的数字 - 黑色文本和白色背景 - 0是没有对比度 - 白色对白色。

任何两种颜色之间的对比度输出将落在0-21之间的频谱上。这就是分数的来源。

There are technically 5 scores.

技术上有5种等级。

1.AAA

2.AAA Large

3.AA

4.AA Large

5.Fail

AAA

AAA表示您的文字的对比度至少为7.0。例如,ffffff背景上的595959文字,反之亦然。

注意的是为了获得真正的AAA评级,WCAG的第1.4.8.1节还规定:“前景色和背景色可以由用户选择。”

因此,除非计划在您的网站或应用程序中创建该功能,否则在我们看来,真的没有必要做高于AA评分。

这个分数来自低视力20/80的人。这种视力分数通常不能用眼镜等来矫正。

附注,20/200在法律上是盲的。

ISO 9241-3 带视觉显示终端(VDTs)的办公室工作的人体工程学要求 - 第3部分:视觉显示要求。修正1*。

AAA Large

AAA Large意味着您的大文本具有4.5或更高的对比率,这与AA相同,这就是为什么不会在应用程序中看到AAA Large作为可见分数的原因。

该WCAG介绍14pt bold,并18pt为“大”尺寸。这大致转化为18.5px bold和24px@ 1x。这是一个近似值,因为字体大小在字体之间可能会有很大差异。

AA

AA意思是你的文字对比值至少在4.5或者更高。举个例子,757777文字在ffffff背景上,反之亦然。 

有经验证据表明,20/40的视力与大约1.5的对比敏感度损失相关,这是4.5分得出的地方。

Gittings,NS和Fozard,JL(1986)。年龄相关的视力变化。Experimental Gerontology,21(4-5),423-433。

ANSI-HFES-100-1988。美国国家视觉显示终端工作站人因工程标准,第6部分,第17-20页。

AA Large (AA+)

AA Large表示您的文字的对比度至少为3.0。例如,ffffff背景上的949595文本。

这是ISO-9241-3和ANSI-HFES-100-1988对于标准文本和正常视力所推荐的最低水平,这是WCAG得出此分数的地方。

我们决定在应用中将“大”缩写为“+”,以便每个分数在字符长度上相似,而不会影响界面的固定宽度。

FAIL

失败意味着您的文字的对比度为2.9或更低。这不适用于logo,logo中的文字和其他装饰元素。

很多时候,失败的分数看起来在静态设计审查的环境中可以很好地发挥作用。但是在现实世界使用的情况下,这些失败的分数可能会导致界面可用性的严重问题。

移动应用程序和他们的大视网膜屏幕怎么样?

有一份WCAG Mobile准则的工作草案,说...

移动设备比台式机/笔记本电脑设备更有可能用于各种环境,包括户外,阳光或其他强光源更可能出现眩光。这种情况增强了所有用户使用良好对比度的重要性,并可能会增加低视力用户查看移动设备上对比度的难度。“

因此,尽管在受控环境下在高分辨率屏幕上看到较轻的文字可能会更容易,但移动设备的使用情况难以置信地难以预测,因此可能会出现文字超亮的风险。阳光直射,黑暗的房间等都会对手机屏幕上的显示产生重大影响。

不仅仅是对比

除了颜色对比外,还有更多可访问性。以下是WCAG的一些片段,例如:

1.4.8视觉呈现:对于文本块的视觉呈现,可以使用以下机制来实现:(AAA级)用户可以选择前景和背景颜色。宽度不超过80个字符或字形(40如果CJK)。文字不合理(与左右边距对齐)。行间距(前导)在段落内至少为半段,段间距至少比行间距大1.5倍。文本可以在不需要辅助技术的情况下调整高达200%,不需要用户在全屏窗口上水平滚动阅读文本行。

您可以看到,为了达到AAA评级,您的应用或网站需要允许用户选择前景色和背景色。所以即使你的色彩对比度是AAA,这并不意味着你的整个产品是。

如果你想看看WCAG更多的规则,可能很困难比较复杂,但是要加油啊。

如果你想要一个傻瓜方法,简单的来检查你的色彩对比,从Mac菜单栏,下载对比相关插件,开始设计更好的界面。



名词解释:

法定盲人:所谓的“法定盲人”,并非全盲什么都看不见。根据美国医疗协会的定义,矫正后优眼视觉敏锐度20 /200以下,或视野角度20度以下,就可认定为“法定盲人”。

WCAG:Web内容无障碍指南(WCAG)涵盖范围广泛,涉及了一些建议,这些建议可使网站内容更容易访问。遵循这些原则,web内容更易为广大残疾人士所接受,这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。遵循这些原则也可让普通用户更容易访问您的网站。版本为WCAG2.0。

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

推荐阅读更多精彩内容