Início › Blog › Testar contraste em vários tamanhos de texto
É comum um par de cores parecer "seguro" num título grande e depois falhar quando o mesmo tom é reutilizado num parágrafo de corpo, numa legenda pequena ou num rótulo de formulário. Este guia foca-se especificamente nesse ponto cego — como testar cada contexto separadamente e como organizar o resultado para reutilizar mais tarde.
Isto explica um erro de design frequente: alguém testa o contraste do título principal de uma página, confirma que passa, e assume que a mesma combinação de cor de marca com fundo claro está "aprovada" para todo o site. Depois essa cor acaba a ser usada num parágrafo de 14px ou numa legenda pequena — onde o limite exigido sobe para 4,5:1 — e o mesmo par que parecia perfeitamente legível no título já não cumpre a norma.
A prática mais segura é nunca assumir que testar um único tamanho de texto cobre todo o site — é preciso repetir o teste para cada contexto tipográfico onde a cor vai ser realmente usada.
Depois de introduzires um par de cores no verificador de contraste de cor da ToolPico, a ferramenta já mostra uma pré-visualização de texto de exemplo e a tabela com os resultados AA/AAA separados por texto normal, texto grande e componentes de interface — por isso o número certo para cada contexto está sempre visível no mesmo resultado.
Dito isto, comparar tamanhos lado a lado ainda exige alguma leitura ativa da tabela de resultados. Uma pré-visualização em bloco único que mostrasse simultaneamente uma amostra em texto normal, uma amostra a negrito e um título grande — em vez de um único bloco de exemplo fixo — tornaria mais imediato ver de uma só vez onde o par falha e onde passa, sem teres de imaginar mentalmente como o mesmo tom se comportaria num título versus numa legenda pequena. É um tipo de melhoria de pré-visualização que faria sentido nas próximas versões da ferramenta.
| Elemento | Categoria WCAG | Mínimo AA |
|---|---|---|
| Título grande (≥24px ou ≥18,66px negrito) | Texto grande | 3:1 |
| Parágrafo / corpo de texto | Texto normal | 4,5:1 |
| Legenda pequena, rótulo de formulário | Texto normal | 4,5:1 |
| Borda de botão / ícone standalone | Componente de interface | 3:1 |
Um fluxo simples para uma paleta de marca nova ou revista costuma ser este: primeiro testas o par de cores mais crítico — geralmente texto de corpo sobre fundo, porque tem o limite mais alto (4,5:1). Se passar aí, o mesmo par quase sempre passa também nos contextos de texto grande e de componentes de interface, já que os limites destes são mais baixos.
Depois de confirmado o par que passa no nível pretendido (AA ou AAA), o passo seguinte é levar essas cores para o código — normalmente como variáveis CSS num ficheiro de tema (--fg, --bg, etc.). Hoje isso significa copiar cada valor hex manualmente do campo de entrada da ferramenta. Um botão de exportação dedicado, ao lado das ações já existentes de partilhar, copiar ligação e imprimir, que gerasse diretamente um bloco pronto a colar do tipo --fg:#111528; --bg:#f5f7fc; pouparia esse passo de transcrição manual e reduziria o risco de copiar mal um dígito — é outra ideia de atalho que encaixaria bem no fluxo de trabalho de quem está a documentar um design system.
Nota: os valores de rácio referidos neste artigo são exemplos ilustrativos para explicar o método, não uma tabela de referência exaustiva — confirma sempre os teus tons exatos na ferramenta.
Introduz o teu par de cores e consulta de imediato os resultados AA/AAA para texto normal, texto grande e componentes de interface — tudo gratuito e sem enviar dados para nenhum servidor.
Experimentar a ferramenta →