"Bello" è gusto; "leggibile" si può misurare. Un testo grigio slavato sembra a posto su un buon monitor e sparisce su un telefono alla luce del sole — scegliere a occhio garantisce che prima o poi succeda.
python3 addons/gohud/tools/check_contrast.py| Che cosa | Richiesto |
|---|---|
| Testo del corpo | 4,5 : 1 |
| Testo grande (da 24px in su) | 3 : 1 |
| Bordi e icone d'accento | 3 : 1 |
| Bordi decorativi | 2 : 1 — le WCAG non applicano la regola 3:1 alla decorazione |
| Superfici adiacenti | 1,12 : 1 — quanto basta perché una scheda si legga come distinta dal suo sfondo |
Testo di una tinta sopra una velatura della stessa tinta
Questa trappola è comparsa tre volte in questa base di codice — pulsanti premuti (pannello d'accento, etichetta d'accento), pulsanti di pericolo e chip. Nel campione di colore sembra ottima e crolla non appena viene misurata, perché i due condividono la tinta e quindi non hanno differenza di luminosità.
Per questo i colori delle etichette non si scelgono a mano. Il generatore di temi e GoSkin spingono
ciascuno la luminosità — e solo la luminosità — finché la soglia non è superata sul pannello su cui il testo
si trova davvero. Tinta e saturazione sopravvivono, così la palette mantiene il suo carattere e cambiarla mantiene il contrasto.
Il colore letto come testo e il colore steso come area vogliono cose opposte
Su un tema chiaro un colore di avviso deve scurirsi per restare leggibile come testo (#96500A).
Quando il riempimento della barra eredita quel colore, la barra dell'esperienza diventa marrone. Il colore da solo non basta:
il giallo è intrinsecamente luminoso, quindi supera 3:1 senza alcuna traccia grigia, e scurire la traccia
peggiora le cose (1,52 → 1,06).
Perciò i due aspetti vengono separati. Il colore resta vivido — la palette porta colori usati solo per il riempimento come
warning_vivid. Il contrasto lo porta il bordo — GoSkin traccia un contorno di 1dp
su ogni riempimento che non raggiunge 3:1 rispetto alla sua traccia, così "quanto è piena" resta leggibile.
MY_LIGHT = dict(
warning=hexc("9A5407"), # letto come testo
warning_vivid=hexc("F2A007"), # steso sulla barra
)*_vivid, un riempimento che viene fuori scuro fa stampare al
generatore the bar looks drab — add warning_vivid to the palette (in italiano: "la barra è spenta — aggiungi
warning_vivid alla palette"). Un punto che prima degradava in silenzio ora lo dichiara.
Un pannello flottante non può sapere che cosa ha dietro
Un HUD è disegnato sopra il gioco — un campo innevato, o una caverna. Se il suo pannello è traslucido, ciò che sta
dietro traspare e ne cambia il colore, portandosi dietro anche il contrasto del testo.
All'82% di opacità il testo attenuato dei temi scuri scendeva a 3,74:1 sopra uno sfondo luminoso — sotto
il minimo.
Perciò i pannelli traslucidi vengono misurati con bianco puro e nero puro dietro; sono il peggio che una scena di gioco possa offrire. Il pannello HUD dei temi inclusi è abbastanza opaco da passare (92%) pur mantenendo l'aspetto vetroso.
Per lo stesso motivo nemmeno i colori delle icone sono fissi. Il glifo dello slot rapido era bianco cablato nel codice
e misurava 1,11:1 su un tema chiaro — ora segue il pannello su cui si trova, esattamente
come fanno le etichette.
check_contrast.py legge i file dei temi;
i colori che una skin mescola mentre gira (chip, slot) vengono misurati dalla sezione
skin contrast della suite dentro Godot.