界面的色彩对比

在这个世界上估计有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。

你可能感兴趣的:(界面的色彩对比)