轉載自： 無障礙設計標准中的對比度
一、什么是無障礙設計
WCAG 2.0（Web Content Accessibility Guideline，Web內容無障礙指南）定義了如何使殘疾人士更方便地使用Web內容的方法，遵循這些方法，Web內容更易為廣大殘疾人士所接受，也可讓普通用戶更容易訪問您的Web內容。
WCAG 中提到的四種主要類型的殘疾是：視力障礙、聽力障礙、運動障礙、智力障礙。
在此基礎上提出了無障礙原則：易於感知的、便於操作的、容易理解的、穩定耐用的。
比如，設計中對顏色的選擇與使用就需遵循「易於感知的」原則。讓用戶更高效地感知並接受網站和App的內容，尤其是文字和圖像，更應具備較高的色彩對比度。
二、為什么要遵循無障礙設計標准
無障礙設計並非只存在於設計行業，好的設計在生活中隨處可見，除了面向大眾，體現人文關懷之外，也讓產品更容易被普通用戶使用。
舉個例子，生活中，普通人是否被允許使用無障礙設施？無障礙設施不僅是給障礙者使用的，而且是給一切需要使用的人使用的。比如無障礙坡道/電梯，除了輪椅、拐杖使用者可以使用，推嬰兒車的父母、推運貨車的工人，甚至當你在春運回家拉着行李箱不方便爬樓時，也可以使用。
（from：圖片來自網絡）
無障礙設計標准，亦是如此，在WCAG 2.0中，主要是為了幫助設計師創造良好的用戶體驗，本篇文章我們只說下對比度。
另外，研究（《Color Contrast And Why You Should Rethink It》）表明，生活中殘障人士的數量並不在少數。有着不同程度的殘疾，包括視力、聽覺、行動及認知障礙的人群，約占全球人口的15%。大多數人在40歲之后，都需要使用老花鏡才能清楚地看到小物體或文字，而這部分人群，約占全球人口的4%。所以我們更應遵循無障礙設計標准。
三、關於顏色對比度的無障礙設計標准
關於顏色對比度的無障礙設計標准，設計師除了了解WCAG中此部分的基礎概念之外，更應將其運用在設計中。
1、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。
這兩個標准可以幫助到那些低視力、色盲、視力惡化的用戶。
2、文本顏色和背景顏色太相似，會導致很難閱讀。對比度太大的文本也會難以閱讀。
過高的對比度會給人帶來不適，建議對比度在 16-18 左右（最高對比度是21，也就是#000000 加 #FFFFFF 。盡量別用這種對比，這會引起一些誦讀困難症患者的不適，他們會感覺文字在旋轉、模糊）。
3、文字和圖片的疊加
圖文混排中，文字和圖片的疊加通常會更加棘手一些，因為在很多情況下，要保證文本和圖片之間有明顯的對比度並不是那么容易。
文字在圖形背景上的顏色與字體選擇也應保持清晰的對比度，避免因對比度太弱，而被本來就存在干擾的背景圖形再次干擾 。
4、當文字出現在有色背景上
當文字出現在有色背景上，二者對比度較低時會導致文字信息視覺弱化，閱讀難度加大。在規范中以4.5為標准值。
四、對比度檢測工具
一些實用在線工具可以用來測試對比度是否滿足 WCAG 2.0 AA 的「色彩無障礙設計」標准。
Easily calculate color contrast ratios：簡單直觀的快捷檢測方式
WebAIM’s Color Contrast Checker：實時查看對比度是否滿足要求。
其他工具推薦：
Color Oracle
Color Safe
我們遵循 WCAG 2.0，做出滿足無障礙設計標准的設計，其根本目的是為殘障人士提供更好的體驗，同時也更能方便普通人使用。遵循這樣的原則使得我們的設計除了具備一定的美觀之外還有據可循，在此基礎上才能創造出更好的用戶體驗！