最近在學(xué)習(xí)大廠設(shè)計(jì)系統(tǒng)時(shí)，發(fā)現(xiàn)了 WCAG 標(biāo)準(zhǔn)。這個(gè)概念之前也聽(tīng)說(shuō)過(guò)，但是沒(méi)怎么當(dāng)回事兒，這次沉下心來(lái)了解了一番，發(fā)現(xiàn)里面包含了不少科學(xué)的方法。我覺(jué)得 B 端設(shè)計(jì)師還是有必要了解下這塊內(nèi)容。

一、什么是 WCAG

Web Content Accessibility Guideline（Web 內(nèi)容無(wú)障礙指南）是業(yè)界公認(rèn)的指導(dǎo)標(biāo)準(zhǔn)，簡(jiǎn)稱(chēng) WCAG 標(biāo)準(zhǔn)。其目標(biāo)是為滿足國(guó)際個(gè)人、組織和政府需求的 Web 內(nèi)容可訪問(wèn)性提供單一共享標(biāo)準(zhǔn)。2018 年 6 月發(fā)布了 2.1 版本，并成為 W3C 推薦標(biāo)準(zhǔn)。WCAG 2.2 草案于 2022 年 9 月完成。

1. 4 項(xiàng)原則

WCAG 解釋了如何讓殘障人士更容易訪問(wèn) Web 內(nèi)容。該標(biāo)準(zhǔn)有 12-13 條準(zhǔn)則，分為 4 項(xiàng)原則：

Perceivable（可感知）

信息和用戶(hù)界面組件必須以用戶(hù)可以感知的方式呈現(xiàn)，用戶(hù)必須能夠感知所呈現(xiàn)的信息（不能對(duì)他們的所有感官都不見(jiàn)）

Operable（可操作）

用戶(hù)界面組件和導(dǎo)航必須是可操作的。用戶(hù)必須能夠操作界面（界面不能要求用戶(hù)無(wú)法執(zhí)行的交互）

Understandable（可理解）

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

Robust（穩(wěn)定耐用）

內(nèi)容必須足夠強(qiáng)的適應(yīng)性，可以兼容包括輔助技術(shù)在內(nèi)的各種用戶(hù)工具。不管技術(shù)的進(jìn)步，還是用戶(hù)工具升級(jí)，內(nèi)容都應(yīng)該保持可訪問(wèn)性。

2. 成功標(biāo)準(zhǔn)

WCAG 是面向殘障人士的，包含了視力、聽(tīng)力、運(yùn)動(dòng)和智力等諸多方面的標(biāo)準(zhǔn)條例。但是符合該指南的產(chǎn)品必然有助于用戶(hù)體驗(yàn)的提升。

每條準(zhǔn)則都有可測(cè)試的成功標(biāo)準(zhǔn)，分為三個(gè)級(jí)別：A（最低），AA，AAA 級(jí)（最高）。

我們?cè)?B 端產(chǎn)品設(shè)計(jì)中，可以參考顏色對(duì)比度的無(wú)障礙標(biāo)準(zhǔn)，提升界面信息的易讀性。

產(chǎn)品設(shè)計(jì)階段和實(shí)際的使用場(chǎng)景還是有差異的，同一個(gè)顏色在不同終端設(shè)備受到色域、分辨率等影響，顯示效果也不相同。用戶(hù)的實(shí)際使用環(huán)境與設(shè)計(jì)師的辦公環(huán)境也可能有很大不同。如果用戶(hù)存在視覺(jué)障礙，對(duì)設(shè)計(jì)的要求將會(huì)更加苛刻。

二、顏色對(duì)比度的無(wú)障礙標(biāo)準(zhǔn)

雖然很多可用性原則都提到易讀性，但是到底該如何做呢？或許每個(gè)設(shè)計(jì)師都有自己的答案。不過(guò)設(shè)計(jì)師不能僅從自身出發(fā)，而需要一個(gè)相對(duì)科學(xué)的標(biāo)準(zhǔn)，去檢驗(yàn)顏色對(duì)比度的可讀性。

WCAG 中就有專(zhuān)門(mén)的顏色對(duì)比度要求。

顏色對(duì)比度是基于亮度或發(fā)光強(qiáng)度，計(jì)算出來(lái)的兩種顏色之間的差異程度，對(duì)比范圍為 1-21。通常寫(xiě)為 1:1 或 21:1，顏色中對(duì)比度的最大值為 21:1（純黑與純白）。兩個(gè)數(shù)字之間的比值越高，顏色的相對(duì)亮度就越大。

為了滿足不同場(chǎng)景下的需要，WCAG 制定了兩條色彩對(duì)比度條例，對(duì)比度最低標(biāo)準(zhǔn)（AA 級(jí)）和對(duì)比度增強(qiáng)標(biāo)準(zhǔn)（AAA 級(jí)）。

1. AA 級(jí)對(duì)比度要求如下：

文本和文本圖像的視覺(jué)呈現(xiàn)具有至少 4.5:1 的對(duì)比度

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

2. AAA 級(jí)對(duì)比度要求更高，要求如下：

文本和文本圖像的視覺(jué)呈現(xiàn)具有至少 7:1 的對(duì)比度

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

參考 Material Design 和 iOS 人機(jī)交互規(guī)范，基本都是以滿足 AA 級(jí)標(biāo)準(zhǔn)為主。特殊情況下要求滿足 AAA 級(jí)標(biāo)準(zhǔn)。

當(dāng)然上述的兩條標(biāo)準(zhǔn)并不是對(duì)所有頁(yè)面文本信息的要求。以下情況的文本，并無(wú)最低對(duì)比度限制：

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

三、顏色對(duì)比度

標(biāo)準(zhǔn)有了，我們?cè)撊绾未_定我們選擇的顏色對(duì)比度呢？

通過(guò)閱讀性能評(píng)估，色相和飽和度對(duì)可讀性的影響其實(shí)很小，甚至沒(méi)有。真正影響閱讀體驗(yàn)的是顏色亮度造成的對(duì)比度。所以在 WCAG 標(biāo)準(zhǔn)中，顏色對(duì)比度計(jì)算公式是基于相對(duì)亮度的。

公式如下：

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

相對(duì)亮度 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 的取值」。

這個(gè)公式很復(fù)雜，我也沒(méi)怎么搞懂。在實(shí)際應(yīng)用過(guò)程，設(shè)計(jì)師可以選擇方便的色彩對(duì)比工具，測(cè)試對(duì)比度是否滿足 WCAG 標(biāo)準(zhǔn)。

推薦兩個(gè)工具

工具一：WebAIM's Color Contrast Checker

這是一款可以對(duì)比度是計(jì)算工具。只要設(shè)定好前景色、背景色，自動(dòng)計(jì)算出對(duì)比度結(jié)果，并判定是否滿足 WCAG 的標(biāo)準(zhǔn)。

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

工具二：Color Tool

Color Tool 是 Google Material Design 提供的一款配色工具，基于 WCAG 標(biāo)準(zhǔn)，自動(dòng)計(jì)算出黑色文本在選定背景色上的最小透明度數(shù)值。

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

根據(jù)以上標(biāo)準(zhǔn)，我們借用 Material Design 的顏色對(duì)比度工具，可以得出在白色背景下，符合 WCAG 標(biāo)準(zhǔn)的顏色范圍：

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

我們?cè)谧龌A(chǔ)規(guī)范時(shí)，就要考慮到 WCAG 標(biāo)準(zhǔn)，將色彩控制在可用性標(biāo)準(zhǔn)之內(nèi)，這樣才能保證產(chǎn)品的閱讀體驗(yàn)。

寫(xiě)在最后

B 端產(chǎn)品設(shè)計(jì)時(shí)，一個(gè)很重要的原則就是清晰，既要能夠清楚地傳遞信息；還要保證界面的易讀性。設(shè)計(jì)評(píng)審時(shí)，我們聽(tīng)到比較多的就是"界面沒(méi)有層次性"。在我看來(lái)，這個(gè)層次性就是界面的整體對(duì)比度。重要信息是否突出顯示，次要信息是否可讀。

有些設(shè)計(jì)師在大面積白色背景上，信息整體平鋪，沒(méi)有通過(guò)一定的設(shè)計(jì)手法進(jìn)行內(nèi)容空間劃分，第一眼效果就是信息的堆砌，毫無(wú)層次感。加之文本用色的隨意性，最終導(dǎo)致頁(yè)面就是"慘白一片"。

所以設(shè)計(jì)師需要借助科學(xué)的方法修正自我的認(rèn)知偏差，這樣才能保證個(gè)人的成長(zhǎng)和設(shè)計(jì)的有效性。

作者：子牧UXD