[求擴散] 關於色弱方面的設計困擾
https://images.plurk.com/2aMcz1LcFmJduP8PqhaxZC.jpg

因為我的遊戲,是使用顏色來區分遊戲的機制,再加上彩度偏低的關係,因此後來發現對於色弱玩家不太友善。


所以我花了一些時間,想要讓這遊戲可以對有這方面困擾的減輕負擔,但因為我自己沒辦法去驗證這樣的做法成效,因此我需要點幫忙……

.
(顏色辨識的圖下收)
latest #32
功能A : 顏色增強
https://images.plurk.com/3oGqlVs00r6cmD26B8jqcr.jpg

功能B : 試著針對甲型色弱(紅色弱)
https://images.plurk.com/40reUqbJVawMYw1WeeG9Wm.jpg

功能C : 試著針對乙型色弱(綠色弱)
https://images.plurk.com/7ALBoa9D5UhnpFkIarl6kX.jpg

功能D : 試著針對第三色弱(藍色弱)
https://images.plurk.com/Hp7n6ovHtuGl7XvLnhx2k.jpg
不知道旅人們,或是身邊有色弱方面困擾的朋友,能不能告訴我,讓我知道這些輔助功能對色弱的玩家是否有幫助呢?

又或是……沒有?(求其它建議QQ)

----------------


最後,因為色弱相關的分歧有點多,所以我需要多一點樣本,因此還請麻煩大家幫忙擴散一下了,感謝。
我是紅綠色色弱,功能B和功能D對我來說是顏色有明顯區別的方案
立即下載
死魚眼
1 years ago
我綠色弱,B、C差異最明顯,D普通,A不行
賽蓮Giddiness
1 years ago
安卓手機 > 系統 › 開發人員選項 ›模擬色彩空間
可以直接模擬色盲、色弱畫面
vt8188: 瞭解了,感謝回饋;這樣看來B跟D都能讓你在遊戲中更方便遊玩
樸實無華的狄娜雅
1 years ago @Edit 1 years ago
adzen: kirisakekirisake:
感謝提供工具網站和可以參考的對象,
之後再針對這塊如果有改動的話,會參考和使用看看 :"D
dfeye: 瞭解了,其實只要ABCD中,有一種能改善狀況的話,都是好消息。
樸實無華的狄娜雅
1 years ago @Edit 1 years ago
因為每個人的狀況不盡相同,所以路過的旅人或噗友測試時,無論有無效果,還請告訴我一下,感恩
社畜雨流
1 years ago
我看是BD差異最大,A的藍紫有高機率會認錯
嚴重色弱仔幫測試,B最好、A勉強區分得出、C的紫藍分不出、D的紫橘分不出@@
這邊不是色弱玩家,有點好奇是想要從中選一種使用嗎?
因為這三種色弱人數其實挺平均的 個人做過的專案是三種都使用讓玩家自己去設定調整
A應該是最無效 因為色弱理論上比較偏向是眼睛錐體看不到這個顏色
看不到的顏色增強了差異也不會太有效 因為看不到XDa
我會建議你不要以色弱為前提去設計 而是以色盲(群體中最嚴重的狀況)為前提去翻找三種不同色盲可以看到的顏色表
然後從顏色表裡挑可用的顏色換上去
製作的時候你必須跳出自己(非色盲)看到的色彩,而是強制把自己的色彩全都轉成色盲跟色弱玩家的世界
打個比方
https://images.plurk.com/711ni3FVGvWDHPbr72MHKf.png
右邊是某一型色盲眼中的顏色,你可以看的出來左邊非色盲的眼中其實是有紅色跟綠色兩個顏色差異,但是對色盲來說只有深淺綠色差
也就是說非色盲的世界是有紅橙黃綠藍靛紫7色,但是此型色盲玩家的世界可能只有綠藍黃3色而已
設計色盲友善可視化項的 5 個秘訣對於色盲族群其實用形狀區分會比用顏色區分友善,例如紅彈是圓的、藍彈是方的、紫彈是三角形。圓環也可以設計成不同的紋路,例如圓形、波浪和鋸齒。
但如果一定要用顏色區分不可的話就真的只能改顏色了。
kirbygogo: 感謝!! 如果BD能夠使你這類型的玩家,能夠有幫助,那我想就沒問題了! (到時候我打算將全部方案都放上去,讓人自定義選擇)
MrEgyptt: OK! 瞭解了 >"<bbbbbbbbb 感謝!!!
nicFole: 我打算全部都放上去供玩家自選,但因為自己用模擬的方式調出來的顏色,不太確定是否真的能夠輔助到色弱玩家,因此才丟出來請大家協助測試,而如果有ABCD都沒用的情況,可能之後會再找時間進一步調整,並且請該噗友幫忙確認這樣子 :"D
koori45: 目前是只能用顏色區分沒錯QQ 但未來如果在製作遊戲專案,或做最後指令的DLC時,心理會盡量留意一下這件事情。
捲起來的熊
1 years ago
補充一下我是色弱者,經常性打遊戲。
(不清楚屬於哪一類型色弱)
捲起來的熊
1 years ago
A:效果改善不佳,紅橘分辨不清
B:紅橘➡️紅黃,紫藍➡️綠藍
C:紅橘➡️紅橘
D:紫藍➡️綠藍,紅橘➡️紅橘
對我來說,如果沒有告訴我原本顏色的話
我會覺得C是最好的選擇
推一下民國北洋政府的五色旗配色
是比較不容易引發辨色異常的設計
killingwing02
1 years ago
自己是比較輕微的色弱
但是我其實沒有實證過是哪邊的辨色比較困難
所以我的意見可能不太好歸類
不過對我來說
A的增強幫助不大,主要是第一張圖的紫和藍對我來說太過相近(能夠區分,但是沒辦法第一時間做出直覺反應)
B的話以辨識度來說很高,但是因為紫色已經變成青綠了,所以比較不喜歡w
C的話比較符合我腦中的顏色描述,而且很好區分
D的話跟B的評論差不多,一樣是很好分辨,但顏色對我來說差的太多了
總結的話
以辨識度來說,我會說是B、D,但是如果照噗主對顏色的提示(紅、紫、藍等),我會比較喜歡C
helen2422: 謝謝提供測試回饋!! >"<b
wts: 哦哦!! 感謝!! 未來在選用顏色時會多加參考看看 (也有聽說現在很多軟體像是Word Excel上預設的選項顏色,就是對這方面有好的預設顏色)
killingwing02: 沒關係,我會在合併大家的訊息來思考,畢竟辨色方便每個人都有程度差異,以及還有不同類別,所以才需要大家回饋的資料,讓我知道目前提供的幾個選項,他們的效果如何 >"<b
人土土君
1 years ago
這邊是色盲我自己也不知道算哪型,看了一下感覺要分左中右三張圖來講效果。
左:
ABCD都一樣沒辦法區分藍色和紫色,紅色在原圖就跟另外兩色有比較明顯的深淺對比,ABCD都有增強紅色和另外兩色的對比。
中:
只有B比較有效,而且要看字的顏色對比才比較明顯,單看圖的話無法分辨,但調過色之後紅色會融進背景裡。
右:
ABCD都有改善,但也是會有紅色融進背景的問題,BC紅橘對比比較明顯。
nicFole: 感謝建議 m(_ _)m
Houjiajun: 感謝回饋,但感覺以你的案例來說,好像ABCD都沒有完全有效的協助到你 QQ (看起來只有B 稍微有效)
人土土君
1 years ago
Dinaya: 對啊~可能我色盲的程度比較嚴重,所以平常基本上都是靠顏色深淺或形狀、符號在玩這類遊戲,抱歉沒辦法讓你找到比較有效的方案。
迷失雀啼
1 years ago
前陣子剛好看到有相關的app可以輔助設計:
色覺模擬器Chromatic Vision Simulator - Apps on Google Play
mistychatty: 哦哦~ 感謝! (可以另外直接用手機看好像挺方便的)
不是色弱,但順手幫你用PS轉成灰階,可以思考看看要怎麼讓畫面在灰階狀態底下仍然能夠分辨出物件的差別?
https://images.plurk.com/2ZmNFh05bQfIjRYUB13BXC.png
我是建議用顏色+形狀去分會比較明顯(順手改個示意圖) https://images.plurk.com/1IahPaILrO96vnKqIrfCr7.png
如果實在沒辦法換形狀(大概也能想像到只換顏色是為了省空間)那就想辦法做出明度差如圖:https://images.plurk.com/d4sV6rPJdUfb6KdygsJZN.png
不過明度差在快速畫面底下沒那麼明顯,所以可以的話還是建議連形狀一起調整
松☆明
1 years ago @Edit 1 years ago
選色上也許還能參考 WCAG AAA 對於前後景對比的建議
WebAIM: Contrast Checker
怎麼做明度差,如果你有在用任何一款繪圖軟體,在選顏色的地方找到HSB的的設定(H: Hue色相、S:Saturation飽和度/彩度、B:Brightness明度)調整B的數值去抓顏色
只調前兩個都會造成灰階底下看不出差別的問題
https://images.plurk.com/1NDzzvs6kg1C6ihxN6Fvsg.png
back to top