在生活中，我們常常可以看到無(wú)障礙設(shè)計(jì)，這些設(shè)計(jì)幫助了一切有需要使用的人。而在產(chǎn)品設(shè)計(jì)里，無(wú)障礙設(shè)計(jì)也同樣存在，比如在網(wǎng)站設(shè)計(jì)中，我們的文字和圖像應(yīng)該具備足夠高的色彩對(duì)比度，應(yīng)當(dāng)容易被用戶感知和識(shí)別。這篇文章里，作者談了談關(guān)于無(wú)障礙閱讀的設(shè)計(jì)技巧，一切來(lái)看看吧。

我們必須要承認(rèn)的現(xiàn)實(shí)是，設(shè)計(jì)師所定義出的色彩在mac上看上去是很出彩，但是這并不能代表所有用戶。也許在用戶中依然有一部分人群，他們的顯示器配置低和老舊。而且我們無(wú)法判斷用戶們的使用環(huán)境，有可能是在刺眼的陽(yáng)光下、有可能是在昏暗的環(huán)境中。如果色彩不去做可用性測(cè)試，在很多的情況下存在體驗(yàn)降低的風(fēng)險(xiǎn)。今天我們來(lái)說(shuō)說(shuō)，UI設(shè)計(jì)師都應(yīng)了解的色彩對(duì)比度要求。

一、Web內(nèi)容無(wú)障礙指南（WCAG）2.1

WCAG（Web Content Accessibility Guideline，Web內(nèi)容無(wú)障礙指南）解決的正是這些障礙問(wèn)題。WCAG 中提到的四種主要類型的殘疾是：視力障礙、聽力障礙、運(yùn)動(dòng)障礙、智力障礙。

在此基礎(chǔ)上提出的POUR無(wú)障礙原則包括了：易于感知的（Perceivable）、便于操作的（Operable）、穩(wěn)定理解的（Understandable）、穩(wěn)定耐用的（Robust）。

顏色則正是對(duì)應(yīng)了易于感知的這一無(wú)障礙原則。網(wǎng)站中的文字和圖像應(yīng)該具備足夠高的色彩對(duì)比度，使之更易被用戶感知識(shí)別。

二、為什么要遵循無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)

無(wú)障礙設(shè)計(jì)并非只存在于設(shè)計(jì)行業(yè)，好的設(shè)計(jì)在生活中隨處可見，除了面向大眾，體現(xiàn)人文關(guān)懷之外，也讓產(chǎn)品更容易被普通用戶使用。

舉個(gè)例子，生活中，普通人是否被允許使用無(wú)障礙設(shè)施？無(wú)障礙設(shè)施不僅是給障礙者使用的，而且是給一切需要使用的人使用的。比如無(wú)障礙坡道/電梯，除了輪椅、拐杖使用者可以使用，推嬰兒車的父母、推運(yùn)貨車的工人，甚至當(dāng)你在春運(yùn)回家拉著行李箱不方便爬樓時(shí)，也可以使用。

另外，研究（《Color Contrast And Why You Should Rethink It》）表明，生活中殘障人士的數(shù)量并不在少數(shù)。有著不同程度的殘疾，包括視力、聽覺、行動(dòng)及認(rèn)知障礙的人群，約占全球人口的15%。大多數(shù)人在40歲之后，都需要使用老花鏡才能清楚地看到小物體或文字，而這部分人群，約占全球人口的4%。所以我們更應(yīng)遵循無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)。

三、關(guān)于顏色對(duì)比度的無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)

WCAG顏色對(duì)比度無(wú)障礙的兩個(gè)標(biāo)準(zhǔn)分別為：【1.4.3條例：最小對(duì)比度標(biāo)準(zhǔn)】和【1.4.6條例：加強(qiáng)對(duì)比度標(biāo)準(zhǔn)】，分別對(duì)應(yīng)著AA級(jí)和AAA級(jí)。

• AA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有4.5：1的對(duì)比度，大號(hào)文本與背景至少有3：1的對(duì)比度
• AAA級(jí)的定義為：普通文本的視覺呈現(xiàn)與背景至少要有7：1的對(duì)比度，大文本與背景至少有4.5：1的對(duì)比度

（分號(hào)前的數(shù)字越大，證明對(duì)比度越強(qiáng)；這里“大號(hào)文本”的定義是≥18pt常規(guī)字重的文本或者≥14pt加粗字重的文本）

文本顏色和背景顏色太相似，會(huì)導(dǎo)致很難閱讀。相反，太大的對(duì)比度也會(huì)給人帶來(lái)不適。對(duì)比度范圍從1到21（俗稱1:1到21:1），最高對(duì)比度是21，也就是 #000000 + #FFFFFF 。盡量別用這種對(duì)比，這會(huì)引起一些誦讀困難癥患者的不適，他們會(huì)感覺文字在旋轉(zhuǎn)、模糊。

四、顏色對(duì)比度驗(yàn)證

那該如何驗(yàn)證我們的顏色符合上述標(biāo)準(zhǔn)呢？網(wǎng)絡(luò)上有諸多工具可以幫助我們輕松查看前景色和背景色的對(duì)比度，以下是筆者此次篩選的3個(gè)個(gè)人認(rèn)為最佳的工具站點(diǎn)：

1）https://color.review/

ColorReview還可以在色板上實(shí)時(shí)調(diào)整查看、測(cè)試發(fā)現(xiàn)可用的顏色

2）https://contrastchecker.com/

Contrastchecker還提供了可以模擬色盲用戶的效果開關(guān)“SEE GRAYSCALE”幫助我們直觀體驗(yàn)色盲用戶的閱讀效果

3）https://contrast-grid.eightshapes.com

可以坐標(biāo)式的批量對(duì)比

不過(guò)WCAG中指出，一些特殊情況下的文本無(wú)最低對(duì)比度的限制：

• 文字為disable狀態(tài)，或作為裝飾、以及其他重要可視內(nèi)容的附屬內(nèi)容時(shí)，可以沒有對(duì)比要求；
• 文字作為商標(biāo)或品牌名稱的一部分時(shí)，可以沒有最低對(duì)比要求。

五、大廠案例

Google Chrome：

「無(wú)障礙設(shè)計(jì)」已經(jīng)是 Google Chrome DNA 的一部分。利用工具，我們驗(yàn)證了 Google text 顏色的對(duì)比度：

經(jīng)驗(yàn)證，發(fā)現(xiàn) Google 在明暗兩種背景下的配色，幾乎都滿足 WCAG 2.1 AAA 標(biāo)準(zhǔn)（color contrast ratio > 4.5），唯獨(dú)白背景下的 warning 色對(duì)比度為3.3，僅滿足 AA 標(biāo)準(zhǔn) （ color contrast ratio > 3）。另，disabled 的顏色對(duì)比度不屬于限定范圍，Google 對(duì)比度是1.8、2.2。

另外實(shí)驗(yàn)發(fā)現(xiàn)，Google 在深淺背景上使用的顏色，都不是直接將 brand color 拿過(guò)來(lái)就用，而是根據(jù)不同背景調(diào)整后的顏色。

而即使是 brand color，Google 也盡量使之和白背景的對(duì)比度滿足 AA 標(biāo)準(zhǔn)（黃色、橙色例外）。

更多對(duì)material design、ios、medium、twitter的驗(yàn)證案例

可移步《色彩無(wú)障礙設(shè)計(jì)之「對(duì)比度」探索》查閱

阿里巴巴發(fā)布的B-Design中的無(wú)障礙色acs指標(biāo)和WCAG本質(zhì)上也是一樣。

結(jié)語(yǔ)

對(duì)比度足夠高的字不僅能讓人看得更清楚，還會(huì)讓人讀起來(lái)更快更順暢。

在設(shè)計(jì)中使用滿足 WCAG 足夠高的對(duì)比度吧，力求給用戶的生活中，增加一些舒服的、合適的、愉悅的體驗(yàn)。

本文參考：

Web內(nèi)容無(wú)障礙指南 （WCAG） 2.1https://www.w3.org/Translations/WCAG21-zh/#visual-presentation

色彩無(wú)障礙設(shè)計(jì)之「對(duì)比度」探索https://mp.weixin.qq.com/s/Hjf4R_FqIfjc-K0QAqXFEA

無(wú)障礙設(shè)計(jì)標(biāo)準(zhǔn)中的對(duì)比度https://www.zcool.com.cn/article/ZNzIzNzEy.html

手把手教你推導(dǎo)一套色彩體系！干貨！https://mp.weixin.qq.com/s/EhL9B3AwcpSsMwfdyiuIKw