色盲者使用的配色檢測法


Contrast-A: Find Accessible Color Combinations 是個很不錯的配色網站,我主要是用它測試在色盲者眼中的顏色會是什麼樣子,是否通過 WCAG 2.0。

什麼是 WCAG 2.0

Web Content Accessibility Guidelines (WCAG) 2.0 可以把它當成網站內容的親和性指南,或是無障礙網頁規範,已經是 W3C 的標準配備了。我知道這一大串很難懂,所以找了中文版有圖有字有影音的好網站給大家參考。

政府資訊科技總監辦公室 : 無障礙網頁手冊 這是香港的政府的官方文件,不止把無障礙網頁介紹得很透徹,最下面連結無障礙網頁成功準則示例 逐條舉出實例更是讓人一看就明白。如果還嫌不夠想了解更多,WCAG_百度百科 寫得很詳細。

(台灣公家機關的無障礙網頁根本是虛應故事…和人家一比好心酸。)

如何檢測

回到文章一開始提到的 Contrast-A: Find Accessible Color Combinations 這個配色網站。


A、B 兩色可自由任選,右方會出現文本和底圖的及時預覽,能讓設計師立刻看到這樣子配色的對比性是否足夠。下方是檢查 WCAG 2.0 色彩亮度的欄位,分 AA 和 AAA 兩種等級。(不要問我為什麼沒有等級 A。)

範例和說明

AA:9.3: WCAG 2.0 成功準則 1.4.3 - 對比度(最低)
AAA:WCAG 2.0 成功準則 1.4.6 - 對比度(增強)


紅底藍字也許在普通人眼中還能閱讀,但藍底紅字就糊掉了。下方有在各類色盲者眼裡看到這種配色的模擬狀態,一整個慘不忍睹。

Normal Vision 正常視力
Protanopia 紅色色盲
Deuteranopia 綠色色盲
Tritanopia 藍色色盲
Color Blindness 全色盲


如果是 #FFFFFF 白色和 #003FFF 藍色來比較。可以看到在 AAA 等級的小字體時仍不夠清晰。


這是舊版的 WCAG 1.0 檢測,參考用,現在通用的規範是 2.0 唷!

BTW

如果是智慧型手機遊戲之類、想放生某些族群我能理解。但如果是大眾通用的平台比如 ATM、指示路牌、公益網站、政府單位等等,我就會變得很嚴格。也許目前技術上沒辦法顧及所有的族群,但在能力範圍內能做多少努力就是多少。這年頭想要對得起自己的良心都是個很大的考驗。

3.1: 社會責任

每個人均有責任一視同仁對待健全人士和殘疾人士。這一點對網站來說尤為重要,因為網站往往可以協助殘疾人士在知識型社會中更獨立地生活,讓他們充分發揮潛能。在某些情況下,網站是殘疾人士接觸最新資訊的唯一途徑。

誤解1: 殘疾人士不使用網站

許多人認為殘疾人士不使用網站。事實上,情況完全相反。很多殘疾人士和健全人士一樣經常使用網站,在網上購物和進行社交活動,令他們更能獨立地生活

取自 政府資訊科技總監辦公室 : 無障礙網頁手冊

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close