Início › Blog › Novidades: pré-visualização e exportar CSS
Novidades no verificador de contraste: pré-visualização multi-tamanho e um botão para exportar CSS
O verificador de contraste de cor da ToolPico acabou de receber duas atualizações pedidas diretamente por quem usa a ferramenta para documentar paletas de marca: a pré-visualização em direto agora mostra vários tamanhos de texto ao mesmo tempo, e há um novo botão para copiar o par de cores aprovado diretamente como variáveis CSS. Aqui fica o que mudou e como usar cada novidade.
Novidade 1: pré-visualização expandida com vários tamanhos
Resposta rápidaA pré-visualização em direto deixou de ser um único bloco de texto fixo. Agora, depois de calculares um par de cores, o cartão de resultado mostra quatro amostras em simultâneo sobre o teu fundo escolhido: um título grande, uma linha a negrito, um parágrafo de texto normal e uma legenda pequena — cada bloco com uma etiqueta a identificar o tipo de texto.
Antes, para imaginar como o teu par de cores se comportava num título e depois num parágrafo pequeno, era preciso ler mentalmente a tabela de resultados AA/AAA e "traduzir" os números em como o texto ficaria realmente no ecrã. Isso já tinha sido apontado como uma limitação num artigo anterior deste blogue — e é exatamente esse ponto cego que a atualização resolve.
Agora, ao clicar em Calcular, o cartão de resultado mostra estes quatro blocos, todos pintados com as tuas cores exatas:
- Título grande — simula um cabeçalho de página, com o texto "Este texto consegue ler-se?" no tamanho e peso tipográfico de um título.
- Texto a negrito — mostra o rácio de contraste calculado dentro de uma frase a negrito, para avaliares peso tipográfico intermédio.
- Texto normal — um parágrafo de exemplo no tamanho de corpo típico, o contexto com o limite AA mais exigente (4,5:1).
- Texto pequeno / legenda — pensado para simular rótulos de formulário, notas de rodapé ou metadados, normalmente o texto mais difícil de ler quando o contraste é marginal.
O cartão de pré-visualização inclui ainda um botão de exemplo entre os blocos, para uma ideia rápida de como a mesma cor de texto funcionaria também sobre um contorno de botão. Não é preciso escolher um "modo" de pré-visualização nem repetir o cálculo — os quatro tamanhos aparecem sempre juntos, na mesma vista, assim que introduzes as duas cores.
Exemplo ilustrativo: imagina um par de cores com um rácio calculado de aproximadamente 3,6:1. Na pré-visualização expandida, o bloco de título grande e o bloco a negrito continuam claramente legíveis, enquanto o bloco de texto pequeno já revela visualmente algum desconforto de leitura — antes mesmo de olhares para a tabela de resultados AA/AAA, o próprio bloco de pré-visualização já sugere onde está o ponto fraco do par.
Novidade 2: botão "Copiar como CSS"
Resposta rápidaJunto aos botões já existentes de Partilhar, Copiar ligação e PDF/Imprimir, há agora um botão "Copiar como CSS" que copia o teu par de cores para a área de transferência já formatado como variáveis CSS personalizadas, prontas a colar num ficheiro de estilos.
O botão gera um bloco no formato seguinte, usando sempre os nomes fixos --contrast-fg (cor de texto) e --contrast-bg (cor de fundo):
| O que é copiado | Exemplo (ilustrativo) |
|---|
Bloco :root com as duas variáveis | --contrast-fg: #111528; |
| --contrast-bg: #f5f7fc; |
| Comentário com o rácio (quando já há resultado calculado) | /* rácio de contraste: 17,8:1 */ |
Depois de clicares no botão, o texto muda brevemente para "Copiado ✓" a confirmar que o bloco já está na área de transferência — o mesmo padrão de confirmação visual usado nos outros botões da barra de ações. Se o teu projeto usa outra convenção de nomes de variáveis (por exemplo --text-color em vez de --contrast-fg), basta colar o bloco no editor e renomear as duas linhas antes de o integrares no teu ficheiro de tema.
Esta novidade elimina um passo manual descrito anteriormente neste blogue: em vez de copiar cada valor hex à mão do campo de entrada e escrever a sintaxe CSS de memória, o par de cores já aprovado sai da ferramenta pronto a colar, reduzindo o risco de transcrever mal um dígito de um código hex.
Como as duas novidades se complementam
As duas atualizações resolvem duas partes diferentes do mesmo fluxo de trabalho. Primeiro, testas um par de cores e usas a pré-visualização expandida para uma verificação visual rápida em quatro contextos tipográficos ao mesmo tempo — título, negrito, texto normal e legenda pequena — sem precisares de repetir o cálculo ou imaginar mentalmente como cada tamanho ficaria. Depois, quando o par te satisfaz (visual e numericamente, na tabela AA/AAA), usas o botão "Copiar como CSS" para levar essas cores diretamente para o teu ficheiro de estilos, sem transcrição manual.
Para quem está a documentar ou a rever uma paleta de marca — o cenário mais comum de quem chega a esta ferramenta — este par de novidades encurta visivelmente o caminho entre "testar uma cor" e "ter essa cor pronta a usar no código", mantendo tudo no mesmo ecrã e sem qualquer dado a sair do navegador.
Nota: os valores de rácio referidos neste artigo são exemplos ilustrativos para explicar as novidades, não uma tabela de referência exaustiva — confirma sempre os teus tons exatos na ferramenta.
Experimenta já as duas novidades
Introduz o teu par de cores, vê a pré-visualização expandida em quatro tamanhos e copia o resultado como variáveis CSS — tudo gratuito, instantâneo e sem enviar dados para nenhum servidor.
Experimentar a ferramenta →
Perguntas frequentes
O que mudou na pré-visualização em direto do verificador de contraste?
A pré-visualização deixou de mostrar um único bloco de texto fixo e passou a mostrar quatro amostras em simultâneo sobre o mesmo fundo: um título grande, uma linha a negrito, um parágrafo de texto normal e uma legenda pequena, cada uma com uma etiqueta a identificar o tipo de texto.
Preciso de calcular o rácio outra vez para ver cada tamanho de texto?
Não. Depois de calculares o par de cores uma única vez, a pré-visualização expandida aparece automaticamente com os quatro blocos (título, negrito, normal, pequeno) já preenchidos com as tuas cores — não é preciso repetir o cálculo nem mudar de separador para comparar os tamanhos.
O que faz exatamente o botão "Copiar como CSS"?
O botão "Copiar como CSS", ao lado de Partilhar, Copiar ligação e PDF/Imprimir, copia para a área de transferência um bloco pronto a colar no formato :root { --contrast-fg: ...; --contrast-bg: ...; }, com as duas cores do teu par atual e, quando já existe um resultado calculado, um comentário com o rácio de contraste.
Os nomes das variáveis CSS geradas podem ser personalizados?
O botão gera sempre os mesmos dois nomes fixos, --contrast-fg para a cor de texto e --contrast-bg para a cor de fundo. Se o teu projeto usa outra convenção de nomes (por exemplo --text-color ou --surface), basta colar o bloco e renomear as variáveis no teu editor antes de as usar no ficheiro de estilos.
Estas novidades funcionam também na verificação de paleta com 4 cores?
A pré-visualização expandida com título/negrito/normal/pequeno e o botão de copiar como CSS aplicam-se ao modo de teste de um par de cores (separador "Teste de contraste"). O separador "Verificação de paleta" continua focado na matriz de contraste entre as quatro cores introduzidas.
Guias relacionados
Nota metodológica: os valores de rácio de contraste apresentados nos exemplos deste artigo são ilustrativos, calculados a partir das cores indicadas com a fórmula oficial WCAG 2.x, e servem para explicar as novidades da ferramenta — não substituem uma auditoria de acessibilidade completa ao teu site. Este conteúdo é apenas informativo e não constitui aconselhamento legal de conformidade.