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

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

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

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

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

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

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

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

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

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

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

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

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

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

B端究竟需要什么样的产品经理？

B端产品经理都是以提升供应侧的工作效率为目的，所以B端需求主要是以业务问题为导向。 这个是B端产品比较重要的一点，B端产品是服务于一个主体 ...

查看详情 >

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

四、顏色對比度驗證

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

1）https://color.review/

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

2）https://contrastchecker.com/

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

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

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

不過WCAG中指出，一些特殊情況下的文本無最低對比度的限制：

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

五、大廠案例

Google Chrome：

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

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

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

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

更多對material design、ios、medium、twitter的驗證案例

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

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

結(jié)語

對比度足夠高的字不僅能讓人看得更清楚，還會讓人讀起來更快更順暢。

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

本文參考：

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

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

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

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