„Ł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
| Co | Wymagane |
|---|---|
| Tekst główny | 4.5 : 1 |
| Duży tekst (od 24 px) | 3 : 1 |
| Obramowania i ikony w kolorze akcentu | 3 : 1 |
| Obramowania dekoracyjne | 2 : 1 — WCAG nie stosuje swojej reguły 3:1 do dekoracji |
| Sąsiadujące powierzchnie | 1.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
)
*_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.
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.