"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
| Apa | Yang diwajibkan |
|---|---|
| Teks isi | 4,5 : 1 |
| Teks besar (24px ke atas) | 3 : 1 |
| Garis tepi dan ikon beraksen | 3 : 1 |
| Garis tepi dekoratif | 2 : 1 — WCAG tidak menerapkan aturan 3:1-nya pada dekorasi |
| Permukaan yang bersebelahan | 1,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 kontras — GoSkin 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
)
*_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.
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.