色盲友好配色

一言以蔽之:用Adobe Color來選擇對色盲友善的配色。

色盲是性聯遺傳

色盲和色弱是一種遺傳性的疾病,此基因只存在於性染色體X上。因為男性XY只有一個X染色體,只要這唯一X是有缺陷的,就會表現出辨色力異常;而女性XX則有二個X染色體,除非這兩個X都是有缺陷的,才會表現出辨色力異常,因此臨床上男性色盲或色弱的比例比女性高。

根據統計,色覺異常者佔全球男生8%,包括紅色盲protan、綠色盲deuteran、藍色盲tritan、黃色盲tetartan、全色盲,其中紅綠色盲(甲型和乙型色盲/弱)是比例最高的。

我們在做Powerpoint的時候,常常會用紅線是參數A、綠線是參數B…這樣的內容,而紅綠線對紅綠色盲來說,是無法分辨的。還有一些其他的顏色,對其他類似的色盲也會造成困擾。

色盲友好配色

Adobe Color提供了一個色盲友好配色網站,可以模擬色覺異常者所看到的顏色,以及他們是否能分辨這些顏色。如果二個顏色之間有線連起來,表示那二個顏色會造成色盲人士的困擾,如下圖中,顏色A和B就對紅綠色盲不友善。

Adobe Color色盲友好配色

如果做投影片時,不方便查詢這個配色網站,那可以記著以下這幾條規則,對色覺異常者也是很有幫助的。

  • 使用符號:曲線圖上,紅線上的數值點用○、綠線上的數值點用△;如果分不出顏色,可以靠符號。
  • 使用紋理:條形圖上,紅柱用密集的紋理▓、綠柱用鬆散的紋理░;如果分不出顏色,可以靠紋理。
  • 使用深淺:如果用紅綠色來區分,選擇深紅和淺綠;如果分不出顏色,可以靠深淺。
  • 使用對比:黑色和白色的對比強烈,色覺異常者也能分辨;藍色和黃色也是對比大的顏色。

使用這些配色方案和工具,可以確保設計的色彩滿足無障礙設計。

色盲感知模擬

網路上有許多工具(例如上述的Adobe Color)可以模擬色盲患者所看到的影像,讓人們可以體驗色盲視覺。這些網站背後的演算法,都是基於生理學的模型來模擬顏色感知,有不少論文在討論這方面的主題。例如,在IEEE Transactions on Visualization and Computer Graphics期刊上,2009年有一篇文章《A Physiologically-based Model for Simulation of Color Vision Deficiency》就提供了一個簡易的模型。

在這個模型中,倘若原始顏色的矩陣是A=[R; G; B],而色盲感知模擬顏色的矩陣是S=[Rs; Gs; Bs],A和S都是3×1的矩陣,其中三個元素是紅/綠/藍的顏色成分(0~255)。可以利用矩陣相乘S=Φ*A來得到S,其中Φ就是色盲感知的transfer matrix,是一個3×3的矩陣。

對於視覺正常的人,顯然Φ=[1,0,0; 0,1,0; 0,0,1]。對於視覺異常的人,這網站有給出一些試算的矩陣。

對對於視覺正常的人之Φ=[1,0,0; 0,1,0; 0,0,1],也就是單位矩陣:
Rs = R
Gs = G
Bs = B
三個顏色都是正常的。
對於100%嚴重程度的紅色盲之Φ=[0.15,1.05,-0.20; 0.11,0.79,0.10; -0.00,-0.05,1.05]:
Rs = 0.15*R + 1.05*G - 0.20*B ≈ G
Gs = 0.11*R + 0.79*G - 0.10*B ≈ G
Bs = -0.00*R - 0.05*G + 1.05*B ≈ B
可以發現原本其看到的紅色大致完全被綠色成分替代,看到的綠色大致還能維持,看到的藍色則沒有改變。
對於100%嚴重程度的綠色盲之Φ=[0.37,0.86,-0.23; 0.28,0.67,0.05; -0.01,0.04,0.97]:
Rs = 0.37*R + 0.86*G - 0.23*B ≈ 0.4*R + 0.9*G - 0.2*B
Gs = 0.28*R + 0.67*G + 0.05*B ≈ 0.3*R + 0.7*G
Bs = -0.01*R + 0.04*G + 0.97*B ≈ B
可以發現其看到的紅色有一半紅一半綠(被綠色汙染而且被藍色抵消),看到的綠色勉強還能維持(但被紅色汙染),看到的藍色則沒有改變。
對於100%嚴重程度的藍色盲之Φ=[1.26,-0.08,-0.18; -0.08,0.93,0.15; 0.00,0.69,0.30]:
Rs = 1.26*R - 0.08*G - 0.18*B ≈ 1.2*R - 0.2*B
Gs = -0.08*R + 0.93*G + 0.15*B ≈ G
Bs = 0.00*R + 0.69*G + 0.30*B ≈ 0.7*G + 0.3*B
可以發現其看到的紅色大致是紅色(被藍色抵消一些),看到的綠色則沒有改變,看到的藍色則變成以綠色為主了。

色彩校正

新款的手機可以依照色盲的情形來進行顏色調整,包括Android手機的無障礙服務「色彩校正」,與iPhone手機的「顏色濾鏡」。

由上面的原理,我們知道顏色感知異常者會多經過一個transfer matrix Φ,只要我們算出Φ的逆矩陣Φ⁻¹,本來手機要顯示原始顏色是A,就改成顯示Φ⁻¹*A,這麼一來,色盲會看到的顏色變成Φ*(Φ⁻¹*A)=(Φ*Φ⁻¹)*A=A,而A就是原本的顏色。

理論是這樣,但實際上並沒有這麼容易,以100%嚴重程度的紅色盲為例子,其Φ=[0.15,1.05,-0.20; 0.11,0.79,0.10; -0.00,-0.05,1.05],其逆矩陣Φ⁻¹=[166.9,-218.5,52.6; -23.1,31.5,-7.4; -1.1,1.5,0.6],會發現這個逆矩陣裡面的加權數字的絕對值很大(超過1很多),導致原始[R; G; B]乘上加權數字後很容易就超過255爆code了。

為了避免R/G/B code超過255,只好對Φ⁻¹*A做attenuation,讓顏色的飽和度下降,就類似色盲矯正眼鏡一文所提的,全頻段都會多一個loss。

實務上,由於100%嚴重程度的Φ⁻¹裡面的加權數字大到無法做補償,所以手機的色彩校正並不會做嚴重程度的Φ⁻¹補償,而是只做輕微程度的Φ⁻¹補償。因此,重度色盲者即便開啟了手機的色彩校正功能,還是可能分不清楚顏色。