無障礙設計標準中的對比度

時間 2019-12-09

標籤無障礙設計標準對比度简体版

原文原文鏈接

轉載自：無障礙設計標準中的對比度

1、什麼是無障礙設計
html

WCAG 2.0（Web Content Accessibility Guideline，Web內容無障礙指南）定義瞭如何使殘疾人士更方便地使用Web內容的方法，遵循這些方法，Web內容更易爲廣大殘疾人士所接受，也可以讓普通用戶更容易訪問您的Web內容。ios

WCAG 中提到的四種主要類型的殘疾是：視力障礙、聽力障礙、運動障礙、智力障礙。網絡

在此基礎上提出了無障礙原則：易於感知的、便於操做的、容易理解的、穩定耐用的。ide

好比，設計中對顏色的選擇與使用就需遵循「易於感知的」原則。讓用戶更高效地感知並接受網站和App的內容，尤爲是文字和圖像，更應具有較高的色彩對比度。工具

2、爲何要遵循無障礙設計標準
測試

無障礙設計並不是只存在於設計行業，好的設計在生活中隨處可見，除了面向大衆，體現人文關懷以外，也讓產品更容易被普通用戶使用。字體

舉個例子，生活中，普通人是否被容許使用無障礙設施？無障礙設施不只是給障礙者使用的，並且是給一切須要使用的人使用的。好比無障礙坡道/電梯，除了輪椅、柺杖使用者可使用，推嬰兒車的父母、推運貨車的工人，甚至當你在春運回家拉着行李箱不方便爬樓時，也可使用。網站

（from：圖片來自網絡）ui

無障礙設計標準，亦是如此，在WCAG 2.0中，主要是爲了幫助設計師創造良好的用戶體驗，本篇文章咱們只說下對比度。spa

另外，研究（《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爲標準值。