gohud

可讀性是量出來的

← 佈景主題

「好看」是品味;「看得清楚」量得出來。淺灰色的文字在好螢幕上看起來沒問題, 到了白天的手機上就消失 — 用眼睛挑,遲早會走到這一步。

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 區段量測。