最近在學習大廠設計系統時，發現了 WCAG 標準。這個概念之前也聽說過，但是沒怎么當回事兒，這次沉下心來了解了一番，發現里面包含了不少科學的方法。我覺得 B 端設計師還是有必要了解下這塊內容。

相關神器推薦：

一、什么是 WCAG

Web Content Accessibility Guideline（Web 內容無障礙指南）是業界公認的指導標準，簡稱 WCAG 標準。其目標是為滿足國際個人、組織和政府需求的 Web 內容可訪問性提供單一共享標準。2018 年 6 月發布了 2.1 版本，并成為 W3C 推薦標準。WCAG 2.2 草案于 2022 年 9 月完成。

1. 4 項原則

WCAG 解釋了如何讓殘障人士更容易訪問 Web 內容。該標準有 12-13 條準則，分為 4 項原則：

Perceivable（可感知）

信息和用戶界面組件必須以用戶可以感知的方式呈現，用戶必須能夠感知所呈現的信息（不能對他們的所有感官都不見）

Operable（可操作）

用戶界面組件和導航必須是可操作的。用戶必須能夠操作界面（界面不能要求用戶無法執行的交互）

Understandable（可理解）

必須讓用戶能夠理解信息以及用戶界面的操作（內容或操作不能超出他們的理解）

Robust（穩定耐用）

內容必須足夠強的適應性，可以兼容包括輔助技術在內的各種用戶工具。不管技術的進步，還是用戶工具升級，內容都應該保持可訪問性。

2. 成功標準

WCAG 是面向殘障人士的，包含了視力、聽力、運動和智力等諸多方面的標準條例。但是符合該指南的產品必然有助于用戶體驗的提升。

每條準則都有可測試的成功標準，分為三個級別：A（最低），AA，AAA 級（最高）。

我們在 B 端產品設計中，可以參考顏色對比度的無障礙標準，提升界面信息的易讀性。

產品設計階段和實際的使用場景還是有差異的，同一個顏色在不同終端設備受到色域、分辨率等影響，顯示效果也不相同。用戶的實際使用環境與設計師的辦公環境也可能有很大不同。如果用戶存在視覺障礙，對設計的要求將會更加苛刻。

二、顏色對比度的無障礙標準

雖然很多可用性原則都提到易讀性，但是到底該如何做呢？或許每個設計師都有自己的答案。不過設計師不能僅從自身出發，而需要一個相對科學的標準，去檢驗顏色對比度的可讀性。

WCAG 中就有專門的顏色對比度要求。

顏色對比度是基于亮度或發光強度，計算出來的兩種顏色之間的差異程度，對比范圍為 1-21。通常寫為 1:1 或 21:1，顏色中對比度的最大值為 21:1（純黑與純白）。兩個數字之間的比值越高，顏色的相對亮度就越大。

為了滿足不同場景下的需要，WCAG 制定了兩條色彩對比度條例，對比度最低標準（AA 級）和對比度增強標準（AAA 級）。

1. AA 級對比度要求如下：

文本和文本圖像的視覺呈現具有至少 4.5:1 的對比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本圖像的對比度至少為 3：1

2. AAA 級對比度要求更高，要求如下：

文本和文本圖像的視覺呈現具有至少 7:1 的對比度

大文本（加粗的 14pt/普通的 18pt 及以上）和大文本圖像的對比度至少為 4.5：1

參考 Material Design 和 iOS 人機交互規范，基本都是以滿足 AA 級標準為主。特殊情況下要求滿足 AAA 級標準。

當然上述的兩條標準并不是對所有頁面文本信息的要求。以下情況的文本，并無最低對比度限制：

1. 未激活的（inactive）用戶界面組件的一部分（按鈕或菜單選項）。
2. 表單字段的占位符 (placeholder) 或 ghost text。
3. 只是純粹的裝飾。
4. 對任何人都不可見的內容。
5. 文本作為「包含其他重要視覺內容圖片」的一部分。
6. 文本作為 logo 或品牌名稱的一部分

三、顏色對比度

標準有了，我們該如何確定我們選擇的顏色對比度呢？

通過閱讀性能評估，色相和飽和度對可讀性的影響其實很小，甚至沒有。真正影響閱讀體驗的是顏色亮度造成的對比度。所以在 WCAG 標準中，顏色對比度計算公式是基于相對亮度的。

公式如下：

對比度 = （L1 + 0.05）/（L2 + 0.05）?！窵 指顏色的相對亮度 」

相對亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中 R, G , B 取值為：若 XsRGB <= 0.03928 則 X = XsRGB/12.92；否則 X = ((XsRGB+0.055)/1.055) ^ 2.4。

XsRGB 在此指代 RsRGB, GsRGB, 或 BsRGB，取值為 XsRGB = X8bit/255「X8bit 指 R、G、B 通道各自在 8 位/通道下 0-255 的取值」。

這個公式很復雜，我也沒怎么搞懂。在實際應用過程，設計師可以選擇方便的色彩對比工具，測試對比度是否滿足 WCAG 標準。

推薦兩個工具

工具一：WebAIM’s Color Contrast Checker

這是一款可以對比度是計算工具。只要設定好前景色、背景色，自動計算出對比度結果，并判定是否滿足 WCAG 的標準。

地址： https://webaim.org/resources/contrastchecker/

工具二：Color Tool

Color Tool 是 Google Material Design 提供的一款配色工具，基于 WCAG 標準，自動計算出黑色文本在選定背景色上的最小透明度數值。

地址： https://material.io/resources/color

根據以上標準，我們借用 Material Design 的顏色對比度工具，可以得出在白色背景下，符合 WCAG 標準的顏色范圍：

1. 大文本可以用的最淺純灰色是#949494
2. 普通字本可以用的最淺純灰色是#757575

我們在做基礎規范時，就要考慮到 WCAG 標準，將色彩控制在可用性標準之內，這樣才能保證產品的閱讀體驗。

寫在最后

B 端產品設計時，一個很重要的原則就是清晰，既要能夠清楚地傳遞信息；還要保證界面的易讀性。設計評審時，我們聽到比較多的就是“界面沒有層次性”。在我看來，這個層次性就是界面的整體對比度。重要信息是否突出顯示，次要信息是否可讀。

有些設計師在大面積白色背景上，信息整體平鋪，沒有通過一定的設計手法進行內容空間劃分，第一眼效果就是信息的堆砌，毫無層次感。加之文本用色的隨意性，最終導致頁面就是“慘白一片”。

所以設計師需要借助科學的方法修正自我的認知偏差，這樣才能保證個人的成長和設計的有效性。

歡迎關注作者微信公眾號：「子牧UXD」