• UI 設計
  • 更新:2026-07-14
  • 初版: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
為何明明是「好設計」,卻讓人用得很痛苦?
為何明明是「好設計」,卻讓人用得很痛苦?

你有沒有遇過這種狀況?
門推不開、按鈕搞不懂,結果發現「設計害了你」?
其實 UX 不只在螢幕裡,生活處處是可用性考驗!

從公共設計看新北市門牌選色
從公共設計看新北市門牌選色

新北市政府這篇換門牌的 貼文 引起很大的討論聲音。尤其是「配色」方面得到許多負面評價,就來看看這幾個顏色出了什麼問題吧!

不給退訂的東森購物電子報
不給退訂的東森購物電子報

2017.07.31 更新:可以退訂了,多了一個「取消訂閱」的選項。

我被東森購物電子報整到已經有種「在這裡購物是我的錯」的感覺了。不想讓人退訂電子報就說啊!做這種浪費大家時間的設計…

國泰世華 ATM 提款機

話先說在前頭,這是我想領 3000 元過日子,ATM 很開心的吐給我 30 張 100 元而埋下淦意。國泰世華新改版 ATM 介面!

Akane Lee

Akane Lee

內心戲小劇場超多!每個事件背後,都有無數個為什麼,天天和自己的腦內聲音吵架。

Comments

wave
comments powered by Disqus

Press ESC to close