使用 Datawrapper 檢查色盲友善配色
目前正在執行的專案涵蓋了不同類型的資訊圖表設計，前幾週跟客戶開會過畫面時，客戶提出希望能確保在不同色盲類型眼中看到的圖表還是可以清楚辨別不同項目。意外地找到 Datawrapper 這套工具，不用註冊會員就能免費生成各種圖表、自訂色彩配置、進行色盲友善配色檢查！本文會簡單介紹一下使用方法。
本文架構一、三種主要色盲類型
二、色盲友善配色檢查
三、調配色盲友善色彩
一、三種主要色盲類型
電影《小太陽的願望》裡的哥哥一心想進入美國空軍學院當飛行員，在目標達成以前他立誓絕不開口說話，殘酷的是電影接近尾聲時，他意外發現自己是色盲，目標頓時成了不可能實現的遺憾，崩潰得大喊一聲 “Fuck!!!!”。難以想像身為色盲（色覺辨認障礙）族群在生活中會遇到的不便，又或者是礙於辨色能力較弱而導致無法從事特定職業的失落。
根據 2007 年的數據，全世界色盲、色弱人口約為 2 億人，在設計需要透過顏色來辨別不同資料屬性的資訊時（圖表、地圖、路線圖等）可以特別考量到色彩通用設計，除了調整配色方案外，也能透過「改變形狀、增加紋理、加入圖標」等方式讓顏色不要成為唯一辨認資訊的途徑。
延伸閱讀 👉🏻
・如何為色盲做設計？
・可達性設計(Design for Accessibility) - 基於介面之上Datawrapper 提供了三種常見的色盲類型檢測，分別是：
- 紅色盲 (Protanopia)：紅綠色盲的一種，男性 1%、女性 0.02%
- 綠色盲 (Deuteranopia)：紅綠色盲的一種，男性 1%、女性 0.01%
- 藍色盲 (Tritanopia)：藍黃色盲的一種，男性、女性 <0.03%
有沒有發現男性色盲的比例比女性高出很多，那是因為人類辨識顏色的基因來自於 X 染色體，女性有兩條 X 染色體，缺失的基因可以由另一條補足，但男性只有一條。
二、色盲友善配色檢查
Datawrapper 的CTO Gregor Aisch 檢查了利用 Datawrapper 製作的近 1200 個圖表，發現約有 9% 的圖表配色會對色盲族群造成辨認障礙，於是在兩年前發佈 “color blindness simulator” 的功能。
1. 在 Datawrapper 點擊 “Start Creating”。
2. 上傳數據資料（左下角可以選擇內建範本）點擊 “Proceed” 生成圖表。
3. 在 “Visualize” 頁面選擇圖表類型。
4. 在 “Refine” tab 點擊 “customize colors” 自訂圖表色彩，右下方的 Colorblind Check 如果有出現三角形警告 icon 就代表目前的配色並不是色盲友善配色。
5. 點擊特定顏色可以快速調整明度 (Lightness)、飽和度 (Chroma)、色相 (Hue)，讓圖表配色在不同色盲類型下可以被清楚辨識。
✦ Gregor Aisch 還有另外開發更簡便的工具 Chroma.js Color Palette，同樣也能進行色盲友善檢查，雖然無法像 Datawrapper 一樣生成各類圖表，但可以根據選定的顏色產生多個過渡色彩。
三、調配色盲友善色彩
在 Paul Tol’s Notes 這個網站找到了幾組色盲友善配色，我先從裡面選擇幾個顏色後，再用 Datawrapper 檢查和調整，下圖是調配出來的色盤，我沒有用什麼很科學的方法 😅，只是多花一些時間調整在不同色盲類型下太過相近不易辨別的色彩，要能兼具色彩間的和諧、又能達到色盲友善真的不太容易。
結語
感謝客戶主動提出色盲友善配色的需求，才有機會對色盲有更多認識！Datawrapper 的設計師 Lisa Charlotte Rost 另外寫了三篇色盲相關文章，推薦給想深入瞭解「色弱和色盲眼中的色彩、色盲友善配色要點、色盲如何影響日常」的人。
對於本文有任何建議、回饋、想法，歡迎在底下留言！也可以透過我的 Facebook 聯繫我 🙌🏻
