gohud

Keterbacaan itu diukur

← Tema

"Cantik" itu selera; "terbaca" itu bisa diukur. Teks abu-abu samar terlihat baik-baik saja di monitor bagus dan lenyap di ponsel saat siang bolong — memilih dengan mata telanjang menjamin hal itu cepat atau lambat terjadi.

python3 addons/gohud/tools/check_contrast.py
ApaYang diwajibkan
Teks isi4,5 : 1
Teks besar (24px ke atas)3 : 1
Garis tepi dan ikon beraksen3 : 1
Garis tepi dekoratif2 : 1 — WCAG tidak menerapkan aturan 3:1-nya pada dekorasi
Permukaan yang bersebelahan1,12 : 1 — cukup agar sebuah kartu terbaca terpisah dari latarnya

Teks berwarna senada di atas rona senada

Jebakan ini muncul tiga kali di basis kode ini — tombol yang ditekan (panel aksen, label aksen), tombol bahaya, dan chip. Ia tampak bagus sebagai contoh warna lalu ambruk begitu diukur, karena keduanya berbagi rona yang sama sehingga tidak ada beda terang di antaranya.

Karena itu warna label tidak dipilih dengan tangan. Pembangun tema dan GoSkin masing-masing mendorong terangnya — dan hanya terangnya — sampai ambang batasnya terlewati pada panel tempat teks itu benar-benar berada. Rona dan kepekatannya bertahan, sehingga paletnya menjaga wataknya dan mengubahnya tetap menjaga kontrasnya.

Warna yang dibaca sebagai teks dan warna yang dilukis sebagai bidang menuntut hal yang berlawanan

Pada tema terang, warna peringatan harus digelapkan agar tetap terbaca sebagai teks (#96500A). Ketika isian bar mewarisi warna itu, bar pengalaman berubah cokelat. Warna saja tak bisa memperbaikinya: kuning memang cerah secara hakiki, jadi ia melewati 3:1 bahkan tanpa alur abu-abu sama sekali, dan menggelapkan alurnya justru membuatnya lebih buruk (1,52 → 1,06).

Maka keduanya dipisahkan. Warnanya tetap cerah — paletnya membawa warna khusus isian seperti warning_vivid. Tepinya yang membawa kontrasGoSkin menggambar garis tepi 1dp pada isian mana pun yang tak bisa mencapai 3:1 terhadap alurnya, sehingga "seberapa penuh isinya" tetap terbaca.

MY_LIGHT = dict(
    warning=hexc("9A5407"),         # dibaca sebagai teks
    warning_vivid=hexc("F2A007"),   # dilukis pada bar
)
Melewatkannya akan dilaporkan. Tanpa sebuah *_vivid, isian yang keluar gelap membuat pembangun tema mencetak the bar looks drab — add warning_vivid to the palette (bar-nya kusam — tambahkan warning_vivid ke paletnya). Tempat yang dulu memburuk diam-diam kini bersuara.

Panel mengambang tak bisa tahu apa yang ada di belakangnya

Sebuah HUD digambar di atas game — padang salju, atau sebuah gua. Kalau panelnya tembus pandang, apa pun yang ada di belakangnya akan merembes dan mengubah warna panelnya, sekaligus menyeret turun kontras teksnya. Pada opasitas 82%, teks muted tema gelap jatuh ke 3,74:1 di atas latar yang cerah — di bawah ambang minimum.

Maka panel tembus pandang diukur dengan putih murni dan hitam murni di belakangnya; itulah yang terburuk yang bisa disodorkan sebuah adegan game. Panel HUD tema bawaan cukup pekat untuk lolos (92%) sambil mempertahankan kesan kacanya.

Karena alasan yang sama, warna ikon pun tidak dipatok. Glif slot cepat dahulu dipatok putih dan terukur 1,11:1 pada tema terang — kini ia mengikuti panel tempatnya berada, persis seperti labelnya.

Dua pemeriksa, dua jangkauan. check_contrast.py membaca berkas temanya; warna yang dicampur sebuah skin saat berjalan (chip, slot) diukur oleh bagian skin contrast pada rangkaian uji di dalam Godot.