Uma cor pode parecer elegante na tela do designer e quase desaparecer para quem visita o site em outro aparelho, com brilho baixo ou visão reduzida. Contraste é a diferença de luminosidade entre o primeiro plano e o fundo; ele determina se texto, controles e sinais visuais podem ser percebidos. Avaliar esse contraste desde a criação evita que a identidade da marca dependa de combinações difíceis de ler.

A meta não é deixar toda interface em preto e branco. É decidir quais elementos precisam ser legíveis, medir as combinações que aparecem juntas e ajustar cores, tamanho, peso ou superfície até que a informação continue clara.

O que a WCAG mede

As diretrizes WCAG definem critérios verificáveis de acessibilidade para conteúdo web. Para texto comum, o nível AA do critério 1.4.3 pede relação de contraste mínima de 4,5:1 entre texto e fundo. Texto grande pode usar 3:1; a definição considera pelo menos 18 pontos em peso normal ou 14 pontos em negrito, com observações sobre fontes muito finas ou incomuns.

Esses valores se referem à combinação real aplicada na interface, não à sensação subjetiva de que duas cores parecem diferentes. Matiz e saturação podem criar uma impressão de contraste para algumas pessoas e pouca separação para outras. A luminância relativa oferece um critério mais consistente para avaliar legibilidade.

O texto de logotipo e alguns casos incidentais têm exceções no critério, mas exceção técnica não garante que o elemento seja fácil de ler. A marca pode precisar de versões alternativas para aplicações pequenas, fundo colorido ou navegação. Para entender os limites e exemplos, consulte a explicação do W3C sobre contraste mínimo de texto.

Texto não é o único elemento que precisa de contraste

Controles e gráficos informativos também dependem de sinais visuais. Bordas de campos, ícones funcionais, indicadores de foco e partes relevantes de gráficos precisam se destacar do entorno. A WCAG 2.2 aborda muitos desses casos no critério 1.4.11, que exige em situações aplicáveis pelo menos 3:1 entre a informação visual e as cores adjacentes.

Um campo com fundo branco e borda quase cinza pode ser difícil de localizar. Um botão só identificado por uma mudança discreta de matiz pode confundir quem não distingue essa variação. Um gráfico que usa vermelho e verde sem rótulos impede que a cor seja a única pista para comparar dados.

O guia do W3C para contraste de elementos não textuais detalha componentes, estados e objetos gráficos. A avaliação depende da função: uma sombra decorativa não é igual a uma borda necessária para identificar um controle.

Faça um inventário das combinações reais

Comece pelos tokens e estilos usados no site, mas não pare na paleta impressa. Liste combinações de texto e fundo em títulos, parágrafos, botões, links, cards, campos, avisos, rodapés e menus. Inclua estados de hover, foco, selecionado, desabilitado e erro quando eles alterarem informação visual.

Priorize elementos usados com frequência e tarefas importantes: ler descrição de serviço, localizar formulário, perceber erro, escolher uma opção e enviar pedido. Uma cor aprovada para um título grande pode falhar quando aplicada em texto pequeno. Cada par precisa ser avaliado na escala e no contexto em que aparece.

O artigo sobre como escolher uma paleta para a identidade visual trata da função e da hierarquia das cores. Use essa lógica para definir papéis como fundo, texto, ação e alerta antes de avaliar cada par de contraste.

Use ferramentas para medir e depois confira visualmente

Calculadoras de contraste permitem inserir valores de cor e verificar a relação obtida. Extensões de navegador ajudam a inspecionar uma página, enquanto ferramentas de design avaliam tokens antes da implementação. Guarde os resultados junto das decisões para que a equipe não precise repetir o diagnóstico a cada componente.

Uma medição automática não substitui a revisão da interface renderizada. Gradientes, transparências, imagens atrás de texto, overlays e estados dinâmicos podem alterar as cores percebidas. Verifique o componente no navegador com o tamanho e o peso tipográfico finais, incluindo telas estreitas e conteúdo real.

Não arredonde um resultado abaixo do limite para fazê-lo parecer aprovado. Se uma ferramenta mostra 4,49:1 para texto comum, aumente o contraste. Fontes finas, antialiasing e telas diferentes podem reduzir ainda mais a clareza prática, então uma margem acima do mínimo costuma oferecer uma decisão visual mais robusta.

Corrija sem diluir o sistema de marca

Há várias formas de corrigir contraste. Escureça a cor do texto, clareie o fundo, aumente o tamanho ou peso, coloque o texto sobre uma superfície opaca ou escolha uma variante de marca para interface. Ajustar o primeiro plano costuma ser menos disruptivo que trocar toda a paleta.

Separe cor de marca usada em grandes áreas de cor usada em texto pequeno. Um azul brilhante pode funcionar bem como fundo de botão com texto escuro, mas não como texto fino sobre branco. Crie pares autorizados e documente onde cada um funciona. O componente deve consumir tokens sem inventar combinações por conta própria.

Se uma cor corporativa não atingir o limite, preserve-a em funções decorativas e escolha uma variante acessível para texto e controles. Um guia curto com exemplos evita que departamentos escolham versões improvisadas. O sistema mantém reconhecimento visual e deixa explícito como atender à legibilidade.

Não transmita estados apenas pela cor

Campos, mensagens e gráficos devem combinar cor com outro sinal. Em um formulário, escreva o erro perto do campo, associe a mensagem ao controle e indique o problema em palavras. Em uma tabela, use texto, ícone ou padrão além da cor. Em links no meio do parágrafo, sublinhado ou outro tratamento ajuda a diferenciar o link do texto ao redor.

O indicador de foco do teclado merece atenção particular. Não remova o contorno padrão sem oferecer uma alternativa visível e consistente. Teste o foco em todos os fundos onde ele aparece, inclusive em menus escuros e cartões com imagens.

O artigo sobre hierarquia visual no design web ajuda a organizar prioridades com tamanho, espaçamento e agrupamento. Quando cor deixa de ser a única pista, a composição ganha redundância útil para diferentes pessoas.

Inclua contraste no processo, não só na auditoria final

Na fase de design, registre combinações aprovadas e teste componentes reutilizáveis. No desenvolvimento, valide tokens no código e evite valores avulsos não documentados. Na revisão de conteúdo, verifique imagens de texto e materiais que chegaram prontos de campanhas. Em QA, navegue com teclado e confira mudanças de estado.

Uma auditoria em lote pode encontrar várias violações, mas correções feitas sem contexto podem alterar hierarquia, tom e chamadas principais. Agrupe problemas por token e componente: se vinte botões usam o mesmo par de cores inadequado, corrigir o token e testar os componentes pode resolver a causa raiz de uma vez.

Faça nova checagem depois de ajustes de marca, tema escuro, atualização de fontes ou troca de biblioteca visual. Acessibilidade visual precisa acompanhar o sistema, porque um token aprovado no tema claro pode não funcionar em outro fundo.

Checklist para revisar o site

  • Texto comum e texto grande foram medidos separadamente?
  • Links se distinguem além da cor quando aparecem em texto corrido?
  • Campos e controles têm limites perceptíveis?
  • Estados de foco, seleção, erro e sucesso continuam visíveis?
  • Gráficos e ícones funcionais têm contraste suficiente?
  • Informação importante aparece também em palavras, rótulos ou padrões?
  • Gradientes, imagens e transparências foram testados no navegador?
  • Os pares aprovados estão documentados como tokens?

Contraste acessível nasce de escolhas previsíveis e pode coexistir com personalidade visual. Meça os pares que comunicam uma tarefa, avalie os estados reais e documente alternativas de marca para cada função. Assim, o site preserva sua identidade e comunica sem depender de uma visão ou tela específica.