无障碍设计标准中的对比度

转载自： 无障碍设计标准中的对比度

 

1、什么是无障碍设计

WCAG 2.0（Web Content Accessibility Guideline，Web内容无障碍指南）定义了如何使残疾人士更方便地使用Web内容的方法，遵循这些方法，Web内容更易为广大残疾人士所接受，也可以让普通用户更容易访问您的Web内容。

 

WCAG 中提到的四种主要类型的残疾是：视力障碍、听力障碍、运动障碍、智力障碍。

 

在此基础上提出了无障碍原则：易于感知的、便于操做的、容易理解的、稳定耐用的。

 

好比，设计中对颜色的选择与使用就需遵循「易于感知的」原则。让用户更高效地感知并接受网站和App的内容，尤为是文字和图像，更应具有较高的色彩对比度。

 

 

 

2、为何要遵循无障碍设计标准

无障碍设计并不是只存在于设计行业，好的设计在生活中随处可见，除了面向大众，体现人文关怀以外，也让产品更容易被普通用户使用。

 

举个例子，生活中，普通人是否被容许使用无障碍设施？无障碍设施不只是给障碍者使用的，并且是给一切须要使用的人使用的。好比无障碍坡道/电梯，除了轮椅、拐杖使用者可使用，推婴儿车的父母、推运货车的工人，甚至当你在春运回家拉着行李箱不方便爬楼时，也可使用。

（from：图片来自网络）

无障碍设计标准，亦是如此，在WCAG 2.0中，主要是为了帮助设计师创造良好的用户体验，本篇文章咱们只说下对比度。

 

另外，研究（《Color Contrast And Why You Should Rethink It》）代表，生活中残障人士的数量并不在少数。有着不一样程度的残疾，包括视力、听觉、行动及认知障碍的人群，约占全球人口的15%。大多数人在40岁以后，都须要使用老花镜才能清楚地看到小物体或文字，而这部分人群，约占全球人口的4%。因此咱们更应遵循无障碍设计标准。

 

 

 

3、关于颜色对比度的无障碍设计标准

关于颜色对比度的无障碍设计标准，设计师除了了解WCAG中此部分的基础概念以外，更应将其运用在设计中。

 

 

一、WCAG 2.0 关于对比度的说明
WCAG2.0中说起的对比度指文本视觉呈现以及文本和图像的对比度。通俗讲就是两个元素颜色之间的色值对比度，同时可根据工具测算出二者具体比值，例如 #FFFFFF 与 #002766比值为14.2。WCAG2.0中具体规定以下：

 

1.4.3最小对比度（最小）：文本视觉呈现/文本图像至少要有4.5:1的对比度，如下部分除外：（AA级）
l   大文本：大号文本以及大文本图像至少有3:1的对比度;
1.4.6对比度（增强）：文本视觉呈现/文本图像至少有7:1的对比度，如下部分除外（AAA级）
l   大文本：大号文本以及大文本图像至少有 4.5:1的对比度。
注：此处的大文本指：至少为24px或19px bold。

 

在此将规范总结成表格：

（From：Making Bootstrap a Little More Accessible — SitePoint）

 

好比，当字号为≥ 24px normal / 19px bold，白色背景上能用的最浅纯灰色为#959595。对比值知足最小的3：1。

 

当字号为＜ 24px normal / 19px bold，白色背景上能用的最浅纯灰色为#767676。对比值知足最小的4.5：1。

这两个标准能够帮助到那些低视力、色盲、视力恶化的用户。

 

 

二、文本颜色和背景颜色太类似，会致使很难阅读。对比度太大的文本也会难以阅读。

太高的对比度会给人带来不适，建议对比度在 16-18 左右（最高对比度是21，也就是#000000 加 #FFFFFF 。尽可能别用这种对比，这会引发一些诵读困难症患者的不适，他们会感受文字在旋转、模糊）。

 

 

三、文字和图片的叠加

图文混排中，文字和图片的叠加一般会更加棘手一些，由于在不少状况下，要保证文本和图片之间有明显的对比度并非那么容易。

文字在图形背景上的颜色与字体选择也应保持清晰的对比度，避免因对比度太弱，而被原本就存在干扰的背景图形再次干扰 。

 

 

四、当文字出如今有色背景上

当文字出如今有色背景上，两者对比度较低时会致使文字信息视觉弱化，阅读难度加大。在规范中以4.5为标准值。

 

 

 

 

 

4、对比度检测工具

一些实用在线工具能够用来测试对比度是否知足 WCAG 2.0 AA 的「色彩无障碍设计」标准。

 

Easily calculate color contrast ratios：简单直观的快捷检测方式

 

WebAIM’s Color Contrast Checker：实时查看对比度是否知足要求。

 

 

其余工具推荐：

Color Oracle

Color Safe

 

咱们遵循 WCAG 2.0，作出知足无障碍设计标准的设计，其根本目的是为残障人士提供更好的体验，同时也更能方便普通人使用。遵循这样的原则使得咱们的设计除了具有必定的美观以外还有据可循，在此基础上才能创造出更好的用户体验！