產品設計師好習慣-五分鐘快速檢查你的設計是否通用性友善(Accessibility friendly)

Debby Hsu

Published in

AAPD — As A Product Designer

7 min readAug 19, 2020

優秀的產品設計師除了能同理使用者需求與痛點，更會將 Accessibility design（通用性設計）納入自己平日的工作流程中。今日這篇文想要分享筆者自己平常在設計流程中會做的兩個快速的 Accessibility 檢查。

What to check

文字對比度測試 (Contrast test) : 在選擇文字跟背景顏色時，對比度必須通過AA測試 (>4.5:1)
色盲模擬測試 (Color blind simulation)：在有大量視覺化圖表的設計時，經過色盲模擬測試，可以檢測使用者是否能在沒有文字輔助下，仍然可以分辨設計中不同的色塊。在圖表、地圖、股市等設計中，通過色盲模擬測試是非常重要的一塊。

Tools 工具

筆者平常都是使用 Stark 這個免費 Sketch Plugin 可以在這邊下載插件，下文會詳細的介紹如何使用這個工具檢測設計。

文字對比度測試 (Contrast test)

以下會示範如何 Stark 這個插件測試文字對比度

Step 1：打開 Sketch，畫一個方塊，填入你的背景顏色。將文字放在方塊上，同時選取。下圖例子我以灰色文字＋白色背景為例子說明。

**Step 1：**Select the text and a rectangular with your background color

Step 2：在 Sketch 中選擇 Stark 插件，在這邊選擇 “測試對比度”

**Step 2：**Use “Stark” sketch plugging, select “Check contrast”

Step 3：文字和背景顏色的組合須通過“WCAG AA”這個標準。

在上圖中”Normal text” 指的是字體至少16px＋一般粗度(regular)。 “Large text” 則是字體至少為 18.66px＋粗體 (bold)或是 24px 一般粗度 (regular)。如果設計上使用的自己小於 16px，會建議增高對比度以確保使用者能夠清處看見圖。

例外 (Incidental)

WCAG 2.0 定義了幾種例外是不用通過上述的對比度測試的。

Inactive state: 一些inactive state的設計元件，像是按不下去的送出按鈕或是暫時無法使用功能的按鍵，是透過低對比的顏色來讓使用者認知到不能使用，因此不需要通過對比測試。
裝飾性設計 (Pure decoration): 任何純裝飾性設計、使用者不需要識讀的部分也不需要通過對比測試。

一起挑個 App 來健檢 - Robinhood

Robinhood 是一個可以買賣股票的產品，前陣子他們更新了主視覺顏色。筆者在看到新舊顏色對比時，不禁懷疑是否因為過去的藍綠色無法通過對比測試的緣故，因此筆者決定來幫 Robinhood 做個小小健檢。

沒想到結果是兩個顏色都沒有通過對比測試，不過新設計的對比度已經比舊設計改善許多。

那我們再來檢測看看 Dark mode 下的對比度。

可以看到 Robinhood 選擇的主視覺綠色，是共通於 Light mode 跟 Dark mode 的。在暗黑模式中（中文是這樣嗎？）對比度都很好 hen 棒。

結論是：如果眼睛不太好的人還是開啟 Dark mode吧！會看得更清楚

色盲模擬測試 (Colorblind simulation)

Step 1: 在 Sketch 中選擇 Stark 插件，在這邊選擇 “ 色盲模擬”

Use “Stark” sketch plugging, select “Colorbilnd simulation”

Step 2: 右下角可以看到有三種模擬，分別是Protanopia(紅綠色盲中的红色盲)、Deuteranopia sight(紅綠色盲中的綠色盲)、Tritanopia(蓝黄色盲中的蓝色盲)。可參考 wiki 的色盲解說

一起挑個網站來健檢 — New York Times的2016選舉地圖

通常有地圖、圖表、資訊是覺化的設計都必須要很注意顏色的使用。最近筆者工作上也需要設計地圖，但礙於產品還未上線，因此我以下以 New York Times 的2016選舉地圖設計為案例，來展示筆者在平日工作中如何使用此插件檢測顏色。

下圖為一般使用者看到的顏色，可以看到他們使用兩大黨主要視覺顏色：紅與藍作為識別。深紅色則是Flip州，也就是上次選舉與此次選舉由不同政黨贏得選票的州。

下圖則是開啟視覺模擬器後看到的樣子，此三種情況下仍然可以清楚的識別民主黨和共和黨所贏的州，也可以看到深紅色的 flip 州也能明顯地被識別。

Tips

在圖表或地圖設計上，除了顏色的差別，也可以使用 Pattern 或 Texture 去幫助使用者識別。在上面案例中可看到 New York Times 在 Flip 州除了有家深紅色外，還有加上斜線幫助識別。某些使用者對於色彩飽和度比較不敏感，即使用了深紅和淺紅也無法識別，加入 Pattern 可以當作另一個識別媒介。

Optional

有些設計師會在電腦螢幕或是電腦設定開啟“灰階(greyscale)” 模式，去模擬全色盲使用者所看到的畫面。如果行有餘力還可以多這一步驟讓設計更完美唷。

Next step

「對比度」和「色盲模擬」兩者就是筆者每日工作中在設計完一定會檢查的。筆者團隊在定義設計系統 (Design system) 時，也會透過上述方法決定主要和次要文字顏色，確認是否符合對比度規範。

以下是建議您可以馬上採取的步驟：

使用上述方法檢測您的設計系統 (Design system) — 主要文字顏色、次要文字顏色
使用上述方法檢測您的設計
如果你的團隊並沒有將「對比度」和「色盲模擬」納入平日工作流程中，不妨分享此篇文給你的團隊，並納入團隊 SOP中！

謝謝耐心閱讀此文，希望對你有幫助！我是一個在矽谷 Yahoo 工作的產品設計師，希望未來能陸續將有用的 tips/design process/生活經驗分享給台灣的設計社群。喜歡的話請追蹤我、給我拍拍手鼓勵，我們下次見 :) 。

Reference:
https://www.w3.org/TR/WCAG21/#contrast-minimum https://zh.wikipedia.org/wiki/%E8%89%B2%E7%9B%B2