超周全！色彩無停滯設(shè)計之「對比度」的探索

@Angelaaa （公眾號：漫聲細(xì)語）：正文開始之前先看一發(fā)文章框架：

一. 為什么要讓對比度知足「色彩無停滯設(shè)計標(biāo)準(zhǔn)」？

Accessible design aids in creating a better experience not just for people with disability, but also for people without it.

舉個例子，一樣平常的門，都必要本身推開或者拉開，但美國一款為殘障人士設(shè)計的門開關(guān)，可以一按下門主動打開。

△ from：Power Door Openers – Access and Mobility

這個「一按門就開」的按鈕，裝在公共建筑的入口，可以幫助坐輪椅的用戶方便開門。

這同時也方便了捧著很多東西的人、抱小孩的人，或者人們干脆都去按它開門——由于它真的比本身去推開/拉開大門方便多了。

所以，知足無停滯設(shè)計標(biāo)準(zhǔn)的設(shè)計，不僅給殘障人士提供了更好的體驗，同時也能更方便通俗人使用。

現(xiàn)實生活中的產(chǎn)品設(shè)計如此，互聯(lián)網(wǎng)產(chǎn)品設(shè)計如此，顏色對比度的設(shè)計亦如此。

1.面向大眾的產(chǎn)品，要盡量知足「有視覺停滯的用戶」

Salesforce 的無停滯設(shè)計顧問 Cathy O’ Connor 經(jīng)常被問到「你們產(chǎn)品究竟有多少殘障人士在使用？」他想說的是，殘障人士的數(shù)量并不少，詳細(xì)數(shù)據(jù)如下：

• 世界人口的15%，有著不同程度的殘疾，包括視力、聽覺、舉措及認(rèn)知停滯。
• 約有4%的人口視力低下，0.6%視盲。這些用戶可能必要借助屏幕閱讀器/盲文閱讀器的幫助。
• 7-12% 的男性有不同情勢的色覺缺陷（如色盲），不到1％的女性如許。他們難以區(qū)分某些特定顏色組合。
• 低視力狀態(tài)隨著年齡的增加而增長，50歲以上的一半人有肯定程度的低視力低狀態(tài)。
• 全球增加最快的人群是60歲以上的人。
• 過了40歲，大多數(shù)人都必要老花鏡，才能清楚地看到小物體或筆墨。

△ from：Color Contrast And Why You Should Rethink It ，by： Cathy O’ Connor

2.要盡量讓產(chǎn)品在「不佳的使用條件」下，仍能使用

大概你覺得你的設(shè)計在 Mac 上看起來很完善啊！

但大概你的用戶中一部分人，用的是老舊、性能差的設(shè)備/ 表現(xiàn)器；大概有人會在強烈的陽光下、在交通工具上，在陰暗的環(huán)境中使用你的產(chǎn)品。假如沒做可用性測試，很可能在真正的「重要使用場景」中，你的產(chǎn)品是幾乎沒法用。

為了讓使用條件不是很好的用戶仍然能正常使用你的產(chǎn)品，也為了更多有視覺停滯的人能用好你的產(chǎn)品，將「無停滯設(shè)計」考慮到產(chǎn)品設(shè)計中，是一件特別很是有需要的事。

什么？為了美觀，不得不摒棄充足高的對比度？那看看這個絕佳網(wǎng)站 Contrast Rebellion，上面列舉了很多真實案例，證實了高對比度設(shè)計仍然很酷很吸引人。

二. 「Color Accessibility」是什么？

WCAG 2.0 （Web Content Accessibility Guideline，Web內(nèi)容無停滯指南）就是為了幫助設(shè)計師創(chuàng)造優(yōu)秀用戶體驗的。

WCAG 中提到的重要的四種類型的殘疾是：

• 視力停滯（Visual impairments）
• 聽力停滯（Hearing impairments）
• 運動停滯（Motor impairments）
• 智力停滯（Intellectual disabilities）

基于此，提出了「POUR無停滯原則」：

• 易于感知的（Perceivable）
• 便于操作（Operable）
• 容易理解的（Understandable）
• 穩(wěn)固耐用的（Robust）

顏色的選擇屬于「易于感知的」無停滯設(shè)計范疇。 也就是說，網(wǎng)站/App 的內(nèi)容應(yīng)該很容易被看到——尤其是筆墨和圖像，應(yīng)該有充足高的色彩對比度（high color contrast ratio），使之很容易地從背景中被辨識出來。

顏色對比度無停滯標(biāo)準(zhǔn)

1.4.3 對比度（最?。? 文本的視覺呈現(xiàn)以及文本圖像至少要有4.5:1的對比度（AA級）。

大文本: 大號文本以及大文本圖像至少有3:1的對比度。

1.4.6 對比度（增強）: 文本視覺呈現(xiàn)以及文本圖像至少有7:1的對比度（AAA級）。

大文本: 大號文本以及大文本圖像至少有 4.5:1的對比度。

Ps：大文本：至少 18pt（24px）或 14pt（19px）bold。

△ from: Web Content Accessibility Guidelines (WCAG) 2.0

將規(guī)范總結(jié)成表格：

△  from：Making Bootstrap a Little More Accessible — SitePoint， by：Rhiana Heath

△ 這就意味著，當(dāng)字號 ≥ 24px normal / 19px bold, 白背景上能用的最淺的純灰色是#959595。

△ 當(dāng)字號＜ 24px normal / 19px bold，白色背景上可以用的最淺純灰色是#767676。（假如在灰色背景上，筆墨顏色應(yīng)該更深）

另外，以下情況的文本，無最低對比度限定：

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

下圖，Salesforce Design Systems team 在本身的移動應(yīng)用的選色上，很好地知足了「WCAG 2.0 AA標(biāo)準(zhǔn)」 。

而且設(shè)計師們在探索高對比度色彩組合的過程中發(fā)現(xiàn)，他們本身越來越喜好高對比度的設(shè)計。我信賴你也會發(fā)現(xiàn)，使用知足標(biāo)準(zhǔn)對比度標(biāo)準(zhǔn)的顏色，并不會影響你產(chǎn)品的美觀。

△ 完全知足大字對比度>3；小字對比度>4.5。

設(shè)計時，可以借助一些工具，比如用「灰度/色盲模仿器」測試設(shè)計。 （ Photoshop 在其“View> Proof Setup”菜單中內(nèi)置了色盲濾鏡。）

時刻記得問問你本身，網(wǎng)頁上的 CTA ( call to action ) 是否「看上去」是網(wǎng)頁中的重要元素。

三. 「對比度檢測」工具保舉

一些實用在線工具可以用來測試對比度是否知足 WCAG 2.0 AA 的「色彩無停滯設(shè)計」標(biāo)準(zhǔn)。

WebAIM’s Color Contrast Checker

可以直接在線調(diào)顏色，實時看對比度是否知足要求。

?? Tanaguru Contrast-Finder

若測試的2個顏色對比度不達標(biāo)，會主動保舉一系列達標(biāo)的顏色可供選擇。

Easily calculate color contrast ratios

方便地檢測對比度是否達標(biāo)。

Color Safe

在定色板之前，可以用它來事先選擇吻合標(biāo)準(zhǔn)的顏色。

Color tool

另外保舉一款 Google 的配色工具，可直接檢測顏色的accessibility。

Color Oracle

檢測不同類型色盲、色弱患者，看到屏幕的結(jié)果。

四. 大廠案例

看完了規(guī)范，仍有些疑心未能解決，比如 ：

disabled text 對比度未作要求，那對比度也不可能是1，究竟多少比較合適？

最低對比度有了要求，那么最高對比度呢？畢竟純黑加純白也很難受。

黃色橙色這種，無論如何在白背景也不可能知足對比度 ＞ 3的顏色，如何處理？

所以我選取了一些比較看重?zé)o停滯設(shè)計的大廠案例，以求能發(fā)現(xiàn)一些規(guī)律。

Google Chrome

「無停滯設(shè)計」已經(jīng)是 Google Chrome DNA 的一部分。曩昔的兩年中，這方面做了尤其多的努力。新的配色方案吻合 WCAG 2.0 規(guī)范，有充足高的對比度。所有的 text、icongraphy，都盡量知足 WCAG 2.0 AAA 標(biāo)準(zhǔn)。

我用 EightShapes Contrast Grid 驗證了一下 Google text 顏色的對比度：

經(jīng)驗證，發(fā)現(xiàn) Google 果然在明暗兩種背景下的配色，幾乎都知足 WCAG 2.0 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

Material Dsign 官方說明：

Accessible color palette

Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

Contrast ratios

The W3C recommends the following contrast ratios for body text and image text:
Small text should have a contrast ratio of at least 4.5:1 against its background
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

Elements

Elements currently in a disabled state are exempt from color contrast standard: this includes buttons in disabled state or inactive menu items.

從 Sketch 中選取 Material Design 的 Template， 測試一下顏色的對比度。

△ Material Design

我分外測了下按鈕 disabled color 的對比度，發(fā)現(xiàn)白背景是1.8；暗色背景的對比度高一些，2.5。

發(fā)現(xiàn)：

• 黑/白色、深灰色，傷害色的顏色，都＞ 4.5，知足 AAA 標(biāo)準(zhǔn)。
• 白背景的「綠色」知足 AA 標(biāo)準(zhǔn)。
• 筆墨 disabled color 對比度分別是2.6、2.5。
• 看起來，深色背景下的灰色系對比度，比淺色背景下更容易達到 3。

iOS

iOS 在對比度上，普遍比 MD 的對比度低。

即使蘋果的官方規(guī)范里也明確對「對比度」做了響應(yīng)規(guī)范：

Human Interface Guidelines：Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

我猜 iOS11 將纖細(xì)筆墨變粗變大，細(xì)線 icon 改為實心 icon， 也是出于進步對比度、讓更多人能看清的初衷吧。

△ from：iOS 10 vs 11：完備 UI 比較分析，by：Taylor Hu

Medium

看下早期的Medium，只有「大M」和深灰色，知足對比度 > 3.0。

現(xiàn)在的 Medium ，色彩對比度都 ≥ 3.0。

測量發(fā)現(xiàn):

• 黑色、深灰色，傷害色，都知足對比度＞ 4.5。
• 某些地方的灰色筆墨（如未激活的Tab筆墨），對比度 ＞ 3。
• 寫文章的 Placeholder 對比度為2.1。
• 禁用控件對比度為1.2（那個右側(cè)淡淡的on/off radio-button）。
• 綠色筆墨較難知足；作為大面積顏色時，綠色更淺。
• 深淺背景下，用的不同綠色。

△ 深淺背景下用的是不同綠色。

Twitter

• 黑色、深灰色，傷害色，都知足對比度＞ 4.5。
• Disabled color 對比度是1.9，接近2。

規(guī)律總結(jié)

由此可大致總結(jié)出一些規(guī)律，可酌情應(yīng)用：

• 黑/白色、深灰色、傷害色，都盡量知足對比度 ＞ 4.5。
• 最高對比度一樣平常在 16-18 左右。（最高對比度是21，也就是 #000000 + #FFFFFF 。盡量別用這種對比，這會引起一些誦讀困難癥患者的不適，他們會感覺筆墨在旋轉(zhuǎn)、模糊）
• Disabled color、placeholder 雖未做限定，但淺色背景上對比度也許是1.8~2.3（盡量2以上），深色背景對比度大致是2.5~3（盡量3）。
• 未激活控件（如tab）筆墨顏色一樣平常對比度 ＞ 3。
• 筆墨顏色、icongraphy，為了知足無停滯色彩對比要求，一樣平常不直接使用 brand color，而是加深/變淺后再用。
• 假如重要背景是白色，brand color 和白色的對比度盡量知足 ≥ 3。（黃色、橙色、綠色較難知足，酌情處理）。
• 深色背景的對比度，比淺色背景的容易知足一些。（即便如此，鄭重在產(chǎn)品中使用深色調(diào)，研究注解散光的人在黑色上閱讀白色筆墨比在白色黑色筆墨更難。Bauer和Cavonius 在 發(fā)現(xiàn)，在淺色背景上用黑色字符閱讀時，比在深色底閱讀淺色字的正確率，高出26%。參考：Why light text on dark background is a bad idea）

五. 知足「無停滯色彩標(biāo)準(zhǔn)」的配色流程

設(shè)計時，可以先從一個特別很是清晰的方案開始嘗試，然后再慢慢往你的美學(xué)方向調(diào)整。

1. 先確定各顏色的深淺

• 首先確定的主色調(diào)，大概是藍色。
• 根據(jù)主色調(diào)確定不同深淺的灰色。 Colllor 這個在線工具能幫你完備這項工作。

△ Colllor 網(wǎng)站截圖

• 選定一個灰色后，再根據(jù)這個灰色選出灰色的淺色系和深色系。

• 選定好灰色后，再用雷同方法，選出其他顏色的深淺色。

△ from: Don’t let your color palette be an airball，by: Zack Gehin

每個顏色 4-6 個深淺度比較合適，不同深淺的顏色別太接近，互相協(xié)調(diào)。

假如本身創(chuàng)建轉(zhuǎn)變規(guī)則也可以，如「疊加5%的黑色」或者「透明度變?yōu)?0%」等等。無論采用哪種方法，確保所有顏色的深淺轉(zhuǎn)變，都遵循同一的規(guī)則。

△ 顏色加深、變淺的方法示例。from: Color Contrast for Better Readability | Viget, by: Tom Osborne

「嘗試—失敗—再嘗試」——這個過程可能會花費大量時間。 Zack Gehin 為 Widen Enterprises 創(chuàng)建色板的過程中，花了40個小時——測試、重選、調(diào)整。效果吻合了他們的預(yù)期，表達出了他們期望的情感，并且知足了Acessibility standards。

Zack Gehin 行使 Colllor 創(chuàng)建的色板示例：

△  from: Don’t let your color palette be an airball，by: Zack Gehin, 2017.8.16

然后再將選好的顏色，放到組件、背景中去測試對比結(jié)果。

2. 確定筆墨顏色

這是一個體系化的工作，可以先從幾個基本文本類型開始：

• 重要筆墨顏色（primary text color）: 段落、標(biāo)簽、其他重要筆墨。
• 次級筆墨顏色（secondary text color）: 表單輔助說明（form microcopy）、說明筆墨、表格題目，等。
• 可交互筆墨顏色（interactive text color）：重要是鏈接筆墨。
• 錯誤信息筆墨顏色（ inline error text color）: 有的在一些交互控件旁邊。
• 禁用筆墨顏色（disabled text color）：通常用在表單控件和按鈕上。

確保至少包含：重要，次要，鏈接和錯誤4種文本顏色。鄭重添加新的顏色，如三級筆墨顏色（teriary text color）、圖標(biāo)添補顏色。

圖標(biāo)顏色一樣平常可以直接相沿已設(shè)置好的 primary, secondary, interactive，error 的顏色。

同樣，先確定body text 的色值，從灰色入手。

測算出在各個背景色上，可用的最低對比度的灰色。

假如按「WCAG 2.0 AA 」的標(biāo)準(zhǔn)，下圖的 #6B797F 就是白背景上筆墨的最淺灰色。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

接下來測試選擇「鏈接文本色」「錯誤文本色」。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

經(jīng)反復(fù)對比，最后確定，在白背景上，選擇 以上2個顏色（對比度＞4.5）。

前文中，從各大網(wǎng)站/ App 中測量得出，

• 未激活tab筆墨，對比度一樣平常＞3；
• disabled text、placeholder，一樣平常對比度是2左右（夜間模式可盡量知足3）。

3. 檢測筆墨色的對比度

然后，將筆墨放在按鈕上，檢測對比度是否知足要求。

不要忘掉交互式狀況，例如按鈕，選項卡，列表組和鏈接的 hover，active 和 selected 狀況。

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

將筆墨放在每一種背景色上測試筆墨對比度?？梢杂?EightShapes Contrast Grid 實時測量兩兩顏色的對比度是否達標(biāo)。

往返測試的同時，反復(fù)優(yōu)化色板。

△ from：Light & Dark Color Systems，by: Nathan Curtis

4. 在不同環(huán)境下測試你的色板

這是設(shè)計過程中最緊張的步驟之一。

調(diào)研確定用戶使用你的產(chǎn)品的重要環(huán)境。 Human environment design 會幫助你確定哪些環(huán)境是必須要考慮的。

環(huán)境測試很簡單，把你的設(shè)備帶到強日光下去、放在陰暗房間里，調(diào)低手機的屏幕亮度（很多手機快沒電了的用戶經(jīng)常如許做）本身去感受測試。

假如有些地方不好用，重新做。

• 在不同表現(xiàn)器上測試你的色板

雖然我們許多人都特別很是榮幸，可以用很好的設(shè)備工作，但是世界上的許多人沒有這么好的條件。我們很容易就風(fēng)俗 Retina 或者 5k 的表現(xiàn)器，但假如用回老舊的低質(zhì)量表現(xiàn)器，我們肯定會驚訝本身用的是啥，圖紙怎么能表現(xiàn)成如許。

△ from: Don’t let your color palette be an airball，by: Zack Gehin

若想知道用戶都在用什么表現(xiàn)設(shè)備，可以從 Google Analytics 上，或者其他你有權(quán)限的數(shù)據(jù)分析工具上獲取數(shù)據(jù)。

5. 確定不同色調(diào)的顏色組合體例

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

6. 輸出色彩規(guī)范文檔

△ from: Color Contrast for Better Readability | Viget, by: Tom Osborne

六. 其他設(shè)計點

1.Input 要有清晰的邊界

△ 一個不錯的input 輸入?yún)^(qū)域。

輸入框有明確的邊界，這對舉措/認(rèn)知停滯的用戶很緊張。

清晰的邊界，可以讓用戶明確知道點擊目標(biāo)的位置和大小。假如沒有清晰的邊框，認(rèn)知停滯用戶可能很難找到輸入框在哪。

上圖是 Medium 寫文章的網(wǎng)頁，沒有任何線索告訴人點擊區(qū)域在哪。

而事實上，可點區(qū)域只有籃框內(nèi)一小部分。

上圖2個寫文章的截面，雖然也沒使用傳統(tǒng)的輸入框情勢，但是它們給用戶提供更多的信息和線索。

在這兩個界面，用戶可以點擊下面空白區(qū)域的任意位置開始輸入筆記；

而且，note-taking 筆記的題目位于兩條水平線之間，視覺線索更顯明一點。

2. 確定輸入控件邊框顏色時，要考慮到不同狀況

文本輸入框，文本輸入?yún)^(qū)域，radio-button ，都必要充足高的對比度以知足可見性和可用性。 控件的邊框顏色特別很是緊張，不能和背景色過于接近。

重要考慮幾種狀況：獲得焦點狀況、默認(rèn)狀況、禁用狀況、錯誤狀況。

△ from：Light & Dark Color Systems，by: Nathan Curtis

3. 假如表單沒有固定標(biāo)簽，那么占位符就要知足最低對比度要求。（對比度＞4.5）

△ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

但其實右下角 價格input那個，更好的做法，是將標(biāo)簽?zāi)玫奖砻鎭恚?/p>

△ from:7 Things Every Designer Needs to Know about Accessibility, by: Jesse Hausler

4. 另外，還要細(xì)致「背景色A」放到「背景色B」上的情況

比如，一張card，本身有背景色 pale grey，放到了一張大背景 cream 色上。這時要細(xì)致，2個顏色組合起來是否仍有充足高對比度。

用一些裝飾手法可以緩解薄弱的對比，比如加邊框，加陰影。

△ from：Light & Dark Color Systems，by: Nathan Curtis

七. 最后

筆墨寫出來不就是為了給人看的么，寫上去又有心不讓人看清，多難堪。

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

在產(chǎn)品設(shè)計的過程中，給推敲顏色留出應(yīng)有的、充足的時間。

別再讓用戶的眼睛受克制了，別再讓用戶分外費勁地看東西了，別再給我們本忙碌的生活增長壓力了——在設(shè)計中使用知足 WCAG 充足高的對比度吧，力求給用戶的生活中，增長一些恬逸的、合適的、愉悅的體驗。