paleta monocromática dark mode
Um tema escuro com muitas matizes diferentes acumula ruído visual rápido; a paleta monocromática resolve fixando uma única matiz e variando só a luminosidade, criando uma escala coerente de tons que ainda comunica hierarquia sem introduzir uma segunda cor.
Os cinco tons vão de L33% (mais escuro) a L77% (mais claro) em passos de 11 pontos, sempre na mesma matiz 170 e saturação 68.
A elevação entre camadas escuras costuma usar o segundo tom mais escuro da escala, não o mais claro, para não competir com o texto principal.
Combinar o extremo mais claro com o mais escuro é o único par da escala com chance real de cumprir 4,5:1; ainda assim precisa ser medido, não presumido pela matiz compartilhada.
Matiz é a posição angular da cor no círculo, geralmente de 0 a 359 graus em HSL. É o que define se a cor é "vermelha", "azul" etc., independentemente da saturação e da luminosidade.
Porque luminosidade é o canal que controla contraste de leitura em telas escuras: variar saturação mudaria a intensidade da cor sem necessariamente clarear ou escurecer o tom o suficiente para diferenciar camadas de fundo, texto e superfície num dark mode.
A ferramenta trava o mínimo em L12% de propósito: preto absoluto contra branco absoluto num OLED cria o maior salto de contraste possível, o que cansa a vista em sessões longas. Um piso de 12% mantém a cor perceptível e evita esse extremo.
Não. A escala garante que todos os tons compartilham matiz e saturação, mas a WCAG 2.1 mede razão de luminância entre um par específico de texto e fundo (4,5:1 para texto normal, 3:1 a partir de texto grande). Dois tons vizinhos na mesma escala podem falhar essa razão mesmo sendo monocromáticos.
O par entre o tom mais claro e o mais escuro da escala (por exemplo #9CECDF sobre #1B8D7A no exemplo H170), porque é a maior diferença de luminosidade disponível dentro da mesma matiz. Ainda assim, meça a razão real antes de publicar, o salto de 11% entre tons vizinhos não é suficiente.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAA paleta é calculada localmente no navegador.