Da tabela de cores ao tema do site: variáveis por papel, modo escuro e contraste

O site da Padaria Trigo foi montado com cores escolhidas numa tabela de nomes HTML: DodgerBlue para os links, DarkGray para o texto de apoio, Crimson para os erros. Ficou bonito na tela do designer. No celular, ao sol, ninguém lê o horário de funcionamento, e o link de encomenda some no meio do parágrafo. Quando o dono pediu "um azul um pouco mais escuro", foram 38 trocas de hex espalhadas em seis arquivos.

A resposta curta: tabela de cores é catálogo; tema é um conjunto de papéis. Defina poucas variáveis CSS com nome de função (--cor-texto, --cor-fundo, --cor-link, --cor-erro), meça o contraste de cada texto sobre cada fundo, monte o modo escuro com valores próprios testados e use só as variáveis no resto do CSS. Trocar a paleta passa a ser mudar um bloco.

Por que cor escolhida no catálogo não funciona como tema

Um hex é uma coordenada: diz qual cor, não para que ela serve. Quando o CSS tem color: #A9A9A9 em 14 lugares, ninguém sabe se aquilo é texto secundário, borda, ícone desativado ou as três coisas. Mudar um uso quebra os outros, e a cor nova nunca é testada contra todos os fundos em que aparece.

O outro problema é a leitura. A tabela mostra cada cor isolada, num quadradinho. Mas legibilidade depende do par: texto sobre fundo. As diretrizes WCAG medem isso com uma razão de contraste calculada a partir da luminância das duas cores, que vai de 1:1 (iguais) a 21:1 (preto no branco). O mínimo para texto comum é 4,5:1; para texto grande e para bordas e ícones que a pessoa precisa enxergar para usar a interface, 3:1.

Medindo as cores da padaria sobre fundo branco:

• DarkGray (#A9A9A9), texto de apoio: 2,35:1. Reprovado com folga.
• DodgerBlue (#1E90FF), links: 3,24:1. Reprovado para texto comum.
• Crimson (#DC143C), erros: 4,99:1. Passa, por pouco.

Dois dos três papéis falham. E o fundo do rodapé, um cinza #F5F5F5, derruba o azul dos links para 2,97:1. Ninguém percebeu porque cada cor foi aprovada sozinha, no quadradinho.

Como transformar as cores soltas num tema

1. Liste os papéis. Fundo, texto, texto secundário, link, erro, sucesso, borda, destaque. Seis a dez papéis cobrem a maioria dos sites.
2. Escolha um valor por papel e meça o contraste contra cada fundo em que ele vai aparecer. A ferramenta de contraste das DevTools do Chrome, do Edge e do Firefox mostra a razão ao inspecionar o texto.
3. Declare tudo como variável em :root, com o nome do papel.
4. Substitua todo hex do CSS pela variável correspondente. Uma busca por # nos arquivos de estilo mostra o que falta.
5. Monte o modo escuro redefinindo só as variáveis, com valores escolhidos e medidos para fundo escuro.
6. Garanta que link e erro não dependem só da cor. Link sublinhado no meio do texto; erro com ícone e mensagem escrita.

O tema da padaria em variáveis

:root {
  color-scheme: light dark;

  --cor-fundo: #FFFFFF;
  --cor-fundo-rodape: #F5F5F5;
  --cor-texto: #1F2937;          /* 14,68:1 sobre o fundo */
  --cor-texto-suave: #4B5563;    /* 7,56:1 */
  --cor-link: #1D4ED8;           /* 6,70:1 */
  --cor-erro: #B91C1C;           /* 6,47:1 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #111827;
    --cor-fundo-rodape: #1F2937;
    --cor-texto: #E5E7EB;        /* 14,33:1 */
    --cor-texto-suave: #9CA3AF;  /* 6,99:1 */
    --cor-link: #93C5FD;         /* 9,84:1 */
    --cor-erro: #F87171;         /* 6,41:1 */
  }
}

body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.apoio { color: var(--cor-texto-suave); }

a {
  color: var(--cor-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mensagem-erro {
  color: var(--cor-erro);
  font-weight: 600;
}

footer { background: var(--cor-fundo-rodape); }

Os comentários registram a razão medida contra o fundo principal. Quando alguém trocar um valor, sabe que precisa medir de novo. O color-scheme: light dark avisa ao navegador que a página suporta os dois modos, e ele ajusta barras de rolagem e campos de formulário nativos para combinar.

Repare no link do modo escuro. A tentação é usar o mesmo azul #1D4ED8 do claro, ou inverter as cores no olho. Sobre o fundo #111827, esse azul cai para 2,65:1: some. O azul claro #93C5FD passa de 9:1. Modo escuro não é o claro invertido; cada valor é escolhido e medido de novo.

Deixar a pessoa escolher o modo

Se o site tem um botão de alternar tema, aplique as mesmas variáveis por atributo no elemento raiz, e o script só troca o atributo:

:root[data-tema="escuro"] {
  color-scheme: dark;
  --cor-fundo: #111827;
  --cor-fundo-rodape: #1F2937;
  --cor-texto: #E5E7EB;
  --cor-texto-suave: #9CA3AF;
  --cor-link: #93C5FD;
  --cor-erro: #F87171;
}

document.documentElement.dataset.tema = 'escuro';

Navegadores recentes também oferecem a função light-dark(), que declara os dois valores na mesma linha. Ela é prática, mas o modelo por papel continua o mesmo: um nome de função, dois valores medidos.

Cor que falha não pode levar a informação junto

Cerca de uma em cada doze pessoas do sexo masculino tem algum tipo de daltonismo, e qualquer pessoa enxerga pior com a tela no sol. Por isso a WCAG pede que a cor não seja o único meio de transmitir informação. Na prática: link no meio do texto ganha sublinhado; campo com erro ganha mensagem escrita e não só borda vermelha; gráfico ganha rótulo ou padrão além da cor da série. Teste o site com o filtro de escala de cinza do sistema: se alguma informação sumir, ela dependia só da cor.

O mesmo vale para o anel de foco do teclado, que costuma desaparecer quando alguém cria o modo escuro e esquece de redefinir a cor dele. O guia sobre foco visível no tema escuro mostra como evitar isso.

Erros comuns

• Hex repetido direto no CSS. Cada mudança de paleta vira caça ao número, e algum uso fica para trás.
• Nome de variável pela cor, como --azul. Quando o destaque virar verde, a variável mente, ou você cria --azul com valor verde.
• Aprovar a cor isolada. O texto passa no fundo branco e reprova no rodapé cinza ou no card colorido.
• Modo escuro por inversão. Cores saturadas que funcionavam no claro somem ou ofuscam no escuro.
• Link diferenciado só pela cor. Quem não distingue aquele tom não acha o link no parágrafo.
• Erro só em vermelho. A mensagem não chega a quem não percebe a cor nem ao leitor de tela.

Checklist

• Todas as cores do CSS vêm de variáveis com nome de papel.
• Uma busca por hex fora do bloco de variáveis não encontra nada.
• Texto comum tem pelo menos 4,5:1 sobre cada fundo em que aparece.
• Bordas e ícones essenciais têm pelo menos 3:1.
• O modo escuro tem valores próprios, medidos, e não inversão.
• Links no texto são sublinhados e erros têm mensagem escrita.
• O foco do teclado aparece nos dois modos.

A conta de contraste em detalhe está no guia de cor com contraste, e o caso de paletas geradas automaticamente em paleta gerada passa no contraste. Agora faça o teste no seu CSS: se o cliente pedir para trocar a cor de destaque amanhã, você muda uma linha ou abre seis arquivos?