UI 设计中的视觉无障碍设计
我給博客改了主題色，從 這樣的 改成了 這樣的；然而我問小伙伴看看效果他卻并沒有發現改變。
紅綠色盲在亞洲人中占比，男性約 5%，女性則小得多。也就是說，就算僅考慮為國內用戶開發應用，這也是很大的一部分用戶了。
本文將通過更加了解色盲（Color Blindness）來指導我們為更多用戶提供更好的 UI 設計。
沒有色盲模擬器
大多數想理解色盲眼中世界的人可能會考慮“色盲模擬器”。在網上搜索“色盲模擬器”，或者英文的“color blindness simulator”可以得到很多的模擬工具，大體思路是將紅色、綠色或藍色分量模擬成另一種顏色分量。
比如下面這款（Coblis — Color Blindness Simulator）：
讀者可以試試自己選擇一張照片，比如我選擇了我拍攝的家門口的照片：
看完就一個感覺——
然而為什么模擬器會模擬成這種圖片？因為不可能找到真正能模擬色盲的模擬方法。
是的——沒有真正的色盲模擬器，這只是正常三色視覺者臆想出來的照片！
那么，他們眼中的世界到底是怎樣？只能想象！
理解和想象色盲眼中的世界
光和顏色
小學科學課本上說“光照在物體上，紅色的光射到了眼睛中，于是我們看到的物體是紅色”；然而這種說法有些勉強。人類可見光波長范圍從約 312.30nm 到 745.40nm 之間，從物理學上光從來都沒有顏色的說法，從來無法僅在物理上定義哪一段屬于紅色、綠色或者青色。那么顏色是怎么來的？——單純只是人類的感覺。
▲ 可見光
而這種感覺從哪里來？從視錐細胞接收到的刺激到大腦皮層的處理這些都是形成感覺的重要部分。對于視錐細胞，維基百科上有說明：
一般人眼中有三種不同的視錐細胞：第一種主要感受黃綠色，它的最敏感點在565納米左右；第二種主要感受綠色，它的最敏感點在535納米左右；第三種主要感受藍紫色，其最敏感點在420納米左右。
▲ 來自于維基百科 顏色
于是，人類對于可見光部分的所有波長的光，會有各種不同的顏色感覺，比如紅色、黃色、綠色、藍色。我們沒有辦法證明每個人對顏色的感知完全一致，不過這里列舉的這四種顏色，在全世界所有文化中理解是一致的。這說明遺傳帶給我們的三種視錐細胞在顏色的感知和理解上占了主導地位。當然，這里說的顏色其實是一段波長范圍，在這一段波長范圍內，所有文化都會認為它是紅色或者黃色或者綠色；雖然有些許不一樣，但大體可以說是這種顏色。雖然在中華文化中，青色也會被說成是藍色的一部分，不過這并不影響人類對這些顏色邊界的模糊劃分。
所以，在這一段中，我們將達成一個認知——
三種不同的視錐細胞決定了我們對于顏色的感知和識別。我們將人類這種通過三種顏色感知細胞對顏色的識別稱為三色視覺。
雙色視覺，三色視覺和四色視覺
有些動物有更多的感受光線的細胞種類，比如鳥。
▲ 來自于維基百科 顏色
事實上，有更多的感受光線的細胞才是“正常”的、“傳統”的。鳥類四種不同的視錐細胞，其主要感受黃、青、藍和紫外，感受峰值分別是 565nm、508nm、440nm、370nm。而這四種不同的視錐細胞從爬行動物進化而來，事實上即便是現在，大多數脊椎動物依然都是這四種視錐細胞。
但是，哺乳動物在進化的過程中丟掉了兩種——青和紫外，只剩下黃和藍部分了。也就是說，大多數哺乳動物都是“色盲”，只有雙色視覺。而靈長類在進化的過程中因為基因突變，“黃”的部分變成了兩種不同的視錐細胞，于是成了三色視覺，主要感受黃色、綠色和藍色。也就是說，相比于哺乳動物，靈長目的雙色視覺（我們所說的色盲）才是“傳統”，而三色視覺其實是基因突變的產物。注意鳥類和人類峰值波長的數字，鳥類的四種峰值波長分布比較平均，而人類的三種峰值波長中黃和綠相隔非常近。這也間接說明了這種基因突變的影響。
▲ 人類黃綠色和綠色感知峰值很近，而鳥類的四種感知峰值都很平均
于是，其實紅色和綠色之間的差異本沒有那么大，只是因為人類在黃綠色和綠色波長部分出現了兩種視錐細胞，于是就把顏色的感知拉得那么大了。即本來差別并不明顯的顏色，被大多數人類夸張到紅色和綠色這樣巨大的差異。
從進化的角度來想象色盲眼中的世界
所以，人類現在的三色視覺其實是從爬行類的四色視覺“進化”至哺乳類的雙色視覺，隨后基因突變再次形成靈長類的三色視覺的，其中黃綠色和綠色的感知是同一個基因突變產生，波長感知差異很小的兩個部分。
于是，紅綠色盲者和大部分祖先——哺乳類觀察綠色和棕色（橙色調暗一點就是棕色）是很接近的兩種顏色。這種接近很像我們觀察綠色和波長稍微長一點的綠色一樣。于是——哺乳類的毛發顏色其實是保護色：
▲ 這只是模擬，不代表 TA 們眼中真實的世界
然后，那個偶然的基因突變讓我們硬生生地把波長稍微長一點點的綠色看成了另一種截然不同的顏色。于是，我們一眼便看出了躲藏在萬綠叢中的一點棕色。那是多么刺眼的顏色！以至于散落的薰衣草的顏色與周圍雜草的顏色對比開始顯得暗淡。甚至如果不經過上面的保護色而是直接看到下圖你都不一定注意得到薰衣草的存在。
▲ 三色視覺的人類發現了草叢中使用了保護色的哺乳動物
以上圖片來源于網絡搜索，模擬由工具生成。如有侵權，請與我聯系。
從四色視覺的角度來想象色盲眼中的世界
現在，我們再來腦洞一次。我們硬生生插入一種新的視錐細胞，并為這種人命名為“異人”。
▲ 硬生生插入一種視錐細胞
于是他會發現上面的蕨類植物和下面的狗尾草的顏色差異巨大，他們一眼便能將狗尾草從草叢中分離出來，而我們人類需要一點點通過葉子的形狀慢慢區分。
假如異人覺得蕨類植物比較好吃，狗尾草吃著惡心，那么他們便能通過顏色一眼從草叢堆種識別出這兩種草來。然后異人有一天突發奇想希望研究我們三色視覺的人類眼中的世界是怎樣的，那么他們把他們新增的那種感知顏色模擬成哪種顏色呢？模擬成蕨類植物色？——那他們眼中的草叢都是好吃的甜蜜的顏色，甚至惡心的狗尾草他們居然都能夠舒舒服服地看著！模擬成狗尾草色？——那他們眼中的草叢居然都是那么惡心的顏色，他們整天怎么受得了！模擬成中間色？——那看起來就一點也沒有草叢的感覺，丑死了！丑死了！一臉嫌棄！
UI 設計中的視覺無障礙設計
作為三色視覺的程序員和設計師，剛剛我們想象了一把雙色視覺的色盲世界，又被四色視覺的異人逼著看葉子的形狀找草體驗了一把當色盲的感覺。于是，我們便知道可以如何照顧他們的感受，考慮那 5% 的用戶做出更好的 UI 設計。
安全色
在有多種顏色方案可選的時候，我們可以挑選出那些對色盲友好的顏色方案。
當然我們并不指望能夠照顧到所有的色盲人群，因為那樣就沒有任何必要去使用顏色了，超過 99% 的用戶將無顏色可用，但這樣的性價比實在太低。但是我們可以盡量照顧到紅綠色盲人群，因為這在色盲人種的比例是最高的，剩余的人群占比非常低，我們將考慮用非顏色元素來實現無障礙設計。
那么，如何挑選呢？
紅色部分可以不變，綠色部分可以考慮像藍色部分偏移，就像現在的紅綠燈設計那樣。色盲者接觸到的顏色信息會少一些，這使得能分辨出的顏色差異會更加明顯。
在團隊的 UI 設計中，建議制作一些產品標準色之后通過色盲模擬器檢驗。此后使用這些標準色。
非顏色輔助元素
如果某些 UI 元素僅用顏色來區分，那么對色盲來說這樣的 UI 將非常難用。
比如下面這個驗證數學公式的方式：
▲ 紅色代表錯誤，綠色代表編輯中
如果用模擬器模擬，將得到這樣的圖像：
▲ 色盲模擬器模擬的輸入框驗證 1
▲ 色盲模擬器模擬的輸入框驗證 2
也就是說，找到錯誤的公式會像我們前面從草叢種分辨出狗尾草一樣困難。
但如果我們增加一點符號顯示，或者在公式旁邊放上文字提示（其中一種就夠了），這樣的問題就能立刻解決。比如這樣：
這時再模擬，也能清楚地找到錯誤的公式：
▲ 色盲模擬器模擬的輸入框驗證 1
▲ 色盲模擬器模擬的輸入框驗證 2
另外，前面我標注人類、鳥類和異人的波長點用的是符號而不是顏色。在制作圖表的時候，通常也應該考慮使用符號代替顏色。
推薦一些工具用來手工檢查界面是否做到了無障礙設計
本文開頭我們說到色盲模擬器并不能模擬色盲眼中的世界，但是我們卻可以用這些模擬器來評估我們的 UI 設計是否能讓色盲者無障礙地使用。
- Toptal Color Blind Filter
- Coblis — Color Blindness Simulator - Colblindor
參考與引用
- 顏色 - 維基百科，自由的百科全書
- 色盲 - 維基百科，自由的百科全書
- 為什么沒有綠色毛發的哺乳動物？ - 小城的回答 - 知乎
- 在紅綠色盲眼里看到的世界是怎樣的？ - 知乎
- 無障礙設計：為色盲用戶多走一步
總結
以上是生活随笔為你收集整理的UI 设计中的视觉无障碍设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常见ActiveX控件下载大全
- 下一篇： RGB，YUV的来历及其相互转换