gohud

Czytelność się mierzy

← Motywy

„Ładne” to kwestia gustu; „czytelne” da się zmierzyć. Blady szary tekst wygląda dobrze na dobrym monitorze i znika na telefonie w słońcu — wybieranie na oko prędzej czy później to gwarantuje.

python3 addons/gohud/tools/check_contrast.py
CoWymagane
Tekst główny4.5 : 1
Duży tekst (od 24 px)3 : 1
Obramowania i ikony w kolorze akcentu3 : 1
Obramowania dekoracyjne2 : 1 — WCAG nie stosuje swojej reguły 3:1 do dekoracji
Sąsiadujące powierzchnie1.12 : 1 — tyle, by karta czytała się jako oddzielona od tła

Tekst w tym samym odcieniu na zabarwieniu tego samego odcienia

Ta pułapka pojawiła się w tym kodzie trzy razy — przy naciśniętych przyciskach (panel akcentu, etykieta akcentu), przyciskach niebezpieczeństwa i chipach. Wygląda dobrze na próbniku i rozpada się w chwili pomiaru, bo oba dzielą odcień i przez to nie różnią się jasnością.

Kolory etykiet nie są więc wybierane ręcznie. Builder motywów i GoSkin każdy z osobna przesuwają jasność — i tylko jasność — aż próg zostanie przekroczony na panelu, na którym tekst faktycznie leży. Odcień i nasycenie przeżywają, więc paleta zachowuje swój charakter, a jej zmiana zachowuje kontrast.

Kolor czytany jako tekst i kolor malowany jako powierzchnia chcą przeciwnych rzeczy

W jasnym motywie kolor ostrzeżenia musi pociemnieć, by pozostać czytelnym jako tekst (#96500A). Gdy wypełnienie paska to dziedziczy, pasek doświadczenia robi się brązowy. Sam kolor tego nie naprawi: żółty jest z natury jasny, więc nie przekracza 3:1 nad żadnym szarym torem, a przyciemnienie toru robi jeszcze gorzej (1.52 → 1.06).

Dlatego jedno zostaje oddzielone od drugiego. Kolor zostaje żywy — paleta niesie kolory tylko do wypełnień, takie jak warning_vivid. Kontrast niesie krawędźGoSkin rysuje obrys 1 dp na każdym wypełnieniu, które nie sięga 3:1 względem swojego toru, żeby „ile tego jeszcze zostało” pozostało czytelne.

MY_LIGHT = dict(
    warning=hexc("9A5407"),         # czytany jako tekst
    warning_vivid=hexc("F2A007"),   # malowany na pasku
)
Pominięcie jest zgłaszane. Bez *_vivid wypełnienie, które wyjdzie ciemne, sprawia, że builder wypisuje the bar looks drab — add warning_vivid to the palette (po koreańsku: „pasek jest matowy — dodaj warning_vivid do palety”). Miejsce, które kiedyś degradowało się po cichu, teraz o tym mówi.

Pływający panel nie może wiedzieć, co jest za nim

HUD rysowany jest na grze — na śnieżnym polu albo w jaskini. Jeśli jego panel jest półprzezroczysty, to, co za nim, przebija przez niego i zmienia kolor panelu, ciągnąc kontrast tekstu w dół razem ze sobą. Przy 82% krycia przygaszony tekst ciemnych motywów spadał do 3.74:1 nad jasnym tłem — poniżej minimum.

Dlatego półprzezroczyste panele mierzone są z czystą bielą i czystą czernią za nimi; to najgorsze, co scena gry może zaserwować. Panel HUD w dołączonych motywach jest dość nieprzezroczysty, by przejść (92%), a mimo to zachowuje szklany wygląd.

Z tego samego powodu kolory ikon też nie są ustalone na sztywno. Glif szybkiego slotu był zakodowany na biało i mierzył 1.11:1 w jasnym motywie — teraz idzie za panelem, na którym leży, dokładnie tak jak etykiety.

Dwa kontrolery, dwa zasięgi. check_contrast.py czyta pliki motywów; kolory, które skórka miesza w czasie działania (chipy, sloty), mierzy sekcja skin contrast zestawu testów wewnątrz Godota.