"Bonito" é gosto; "legível" dá para medir. Um texto cinza fraco fica bem em um bom monitor e some em um celular sob a luz do dia — escolher no olho garante que isso vai acontecer mais cedo ou mais tarde.
python3 addons/gohud/tools/check_contrast.py| O quê | Exigido |
|---|---|
| Texto corrido | 4.5 : 1 |
| Texto grande (24px ou mais) | 3 : 1 |
| Bordas e ícones de destaque | 3 : 1 |
| Bordas decorativas | 2 : 1 — a WCAG não aplica a regra de 3:1 a elementos decorativos |
| Superfícies adjacentes | 1.12 : 1 — o suficiente para um cartão se ler como separado do fundo |
Texto de um matiz sobre uma tonalização do mesmo matiz
Essa armadilha apareceu três vezes neste código — botões pressionados (painel de destaque, rótulo de destaque), botões de perigo e chips. Fica bonito em uma amostra de cor e desmorona no instante em que é medido, porque os dois compartilham o matiz e, por isso, não têm diferença de luminosidade.
Por isso as cores dos rótulos não são escolhidas na mão. O gerador de temas e o GoSkin
empurram a luminosidade — e só a luminosidade — até o limite ser vencido sobre o painel em que o texto de fato
está. O matiz e a saturação sobrevivem, então a paleta mantém o caráter dela e mudá-la mantém o contraste.
Cor lida como texto e cor pintada como área querem coisas opostas
Em um tema claro, uma cor de aviso precisa escurecer para continuar legível como texto
(#96500A). Quando o preenchimento da barra herda isso, a barra de experiência fica marrom.
A cor sozinha não resolve: o amarelo é intrinsecamente claro, então nem sobre trilho cinza nenhum ele alcança
3:1, e escurecer o trilho piora (1.52 → 1.06).
Por isso os dois são separados. A cor continua viva — a paleta carrega cores só de preenchimento, como
warning_vivid. A borda carrega o contraste — o GoSkin desenha um contorno de
1dp em todo preenchimento que não alcança 3:1 contra o trilho dele, então "o quanto ela está cheia" continua legível.
MY_LIGHT = dict(
warning=hexc("9A5407"), # lida como texto
warning_vivid=hexc("F2A007"), # pintada na barra
)*_vivid, um preenchimento que sai escuro faz o
gerador imprimir the bar looks drab — add warning_vivid to the palette (em coreano: "a barra
está sem graça — acrescente warning_vivid à paleta"). Um ponto que antes se degradava em silêncio agora avisa.
Um painel flutuante não sabe o que está atrás dele
Um HUD é desenhado sobre o jogo — um campo de neve, ou uma caverna. Se o painel dele é translúcido, o que
estiver atrás vaza através e muda a cor do painel, levando junto o contraste do texto.
Com 82% de opacidade, o texto esmaecido dos temas escuros caiu para 3.74:1 sobre um fundo claro —
abaixo do mínimo.
Por isso os painéis translúcidos são medidos com branco puro e preto puro atrás deles; é o pior que uma cena de jogo tem a oferecer. O painel de HUD dos temas que acompanham o pacote é opaco o bastante para passar (92%), mantendo o aspecto de vidro.
Pelo mesmo motivo, as cores dos ícones também não são fixas. O glifo do slot rápido estava cravado em
branco no código e mediu 1.11:1 em um tema claro — agora ele acompanha o painel em que está,
exatamente como os rótulos.
check_contrast.py lê os arquivos de tema;
as cores que uma skin mistura em tempo de execução (chips, slots) são medidas pela seção
skin contrast da suíte, dentro do Godot.