色盲者使用的配色檢測法

  • UI 設計
  • 更新:2025-01-26
  • 初版:2014-04-10


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: 殘疾人士不使用網站

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

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

不知道設計卡在哪?

👉 第一次來?從這裡開始

下面這些文章,從不同角度整理那些容易被忽略的地方

wave
這種網頁設計越來越受歡營!Bento Design 有什麼魔力?
這種網頁設計越來越受歡營!Bento Design 有什麼魔力?

「Bento」怎麼唸?扁東?對,就是日語「便當」。
但這跟網頁設計有什麼關係?
其實,Bento Design 就像便當一樣,把資訊分格擺放,整齊又有條理!

nav 要包在 header 裡?

Html5 有很多新元素,最常用到的就是 nav、header、footer 這三個。不過對於 nav 該放在 header 裡、還是在 header 外,就我學習到、和老公教的是「看情況」。

設計和 F2E 的切圖與切版

收到讀者來信,這位讀者是 F2E,發現設計師的切圖和 F2E 的切版似乎不太一樣,所以寫信給我。另外問切圖有什麼樣的流程和注意事項…不知道要怎麼詳細說明,其實還滿想回他一句「多被RD罵幾次就會了啊」…orz

Fixed Grid System 詳解


我踩到一個沒把 Fixed Grid 學好的雷orz 特此拿出來筆記下。之前在 [Grid 的運用:PS外掛] (/posts/194263-application-of-grid/) 一文中有簡單提到 Grid 的運用,但講得不夠清楚,後來活用時遇到個問題:如果你的網頁有側邊欄的時候,要怎麼設計才符合 Grid?

Akane Lee

Akane Lee

我是 Akane Lee,10 年 UI/UX 設計教學,帶過 1000+ 學員擺脫焦慮,找出人生方向。不只聊設計,也教你怎麼少繞遠路,摔坑也知道怎麼自己爬起來。

Comments

wave
comments powered by Disqus

Press ESC to close