「好看」是品味;「看得清楚」量得出來。淺灰色的文字在好螢幕上看起來沒問題, 到了白天的手機上就消失 — 用眼睛挑,遲早會走到這一步。
python3 addons/gohud/tools/check_contrast.py
| 項目 | 要求 |
|---|---|
| 內文文字 | 4.5 : 1 |
| 大字(24px 以上) | 3 : 1 |
| 強調色的邊框與圖示 | 3 : 1 |
| 裝飾性邊框 | 2 : 1 — WCAG 不把 3:1 的規則套用在裝飾上 |
| 相鄰的面 | 1.12 : 1 — 足以讓卡片看起來和背景是分開的 |
同色相的文字疊在同色相的著色上
這個陷阱在這套程式碼裡出現了三次 — 按下狀態的按鈕(強調色面板配強調色標籤)、 危險按鈕,以及標籤片。它在色票上看起來很好,一量就垮,因為兩者色相相同,明度自然沒有差別。
所以標籤顏色不是手挑的。佈景主題產生器與 GoSkin 各自
推動明度 — 而且只推明度 — 直到在文字實際落腳的那塊面板上達標為止。色相與飽和度保持不變,
所以調色盤維持它的個性,換了調色盤對比也還在。
當成文字讀的顏色,和當成面積塗的顏色,要的東西相反
在淺色佈景主題上,警告色必須變深才能當成文字讀得清楚(#96500A)。
量條的填色如果直接繼承它,經驗量條就會變成咖啡色。光靠顏色解決不了:
黃色本來就亮,在完全沒有灰色軌道的情況下就能過 3:1,而把軌道加深只會更糟(1.52 → 1.06)。
所以兩者被分開了。顏色保持鮮豔 — 調色盤帶有只用於填色的顏色,例如
warning_vivid。對比交給邊緣 — GoSkin 會在任何無法對軌道
達到 3:1 的填色上畫一道 1dp 外框,讓「現在裝了多滿」依然看得清楚。
MY_LIGHT = dict(
warning=hexc("9A5407"), # 當成文字讀
warning_vivid=hexc("F2A007"), # 塗在量條上
)
*_vivid,填色算出來偏暗時,產生器就會印出
the bar looks drab — add warning_vivid to the palette(產生器實際輸出的字句,
意思是「量條變得灰暗 — 請在調色盤裡加上 warning_vivid」)。以前會默默劣化的地方,現在會出聲。
浮動面板不知道背後是什麼
HUD 是畫在遊戲之上的 — 可能是一片雪原,也可能是一個洞窟。如果它的面板是半透明的,
背後的東西就會透出來並改變面板的顏色,連帶把文字對比拉下去。
在 82% 不透明度下,深色佈景主題的淡化文字疊在明亮背景上只剩 3.74:1 — 低於下限。
所以半透明面板是拿純白與純黑墊在背後量的;那是遊戲場景所能給出的最糟情況。 內附佈景主題的 HUD 面板夠不透明(92%)而能過關,同時保住那層玻璃感。
基於同樣的理由,圖示顏色也不是寫死的。快捷格的圖形原本被寫死成白色,
在淺色佈景主題上量出 1.11:1 — 現在它會跟著所在的面板走,和標籤完全一樣。
check_contrast.py 讀的是佈景主題檔;
外觀在執行期間混出來的顏色(標籤片、快捷格)則由測試套件在 Godot 裡的
skin contrast 區段量測。