Contraste de cores no site: melhore leitura sem depender só da paleta
A resposta direta: contraste não é apenas preferência estética. Verifique texto normal e grande, ícones que comunicam estado, bordas necessárias para identificar controles e indicadores de foco contra seus fundos reais. A WCAG 2.2 define critérios específicos: em geral, texto normal precisa de 4,5:1, texto grande de 3:1 e componentes visuais relevantes de 3:1 em relação às cores adjacentes. Use as medidas como requisito de projeto e valide cada estado.
Por que cor e legibilidade precisam ser planejadas juntas
Uma combinação pode parecer elegante em um monitor e ficar difícil de ler em outra tela, sob luz forte ou para pessoas com baixa visão ou deficiência de percepção de cor. Texto cinza claro sobre branco, laranja suave em fundo claro e informação diferenciada só por vermelho ou verde podem desaparecer para parte do público. Contraste ajuda mais pessoas a perceber conteúdo, controles e estados sem depender de uma condição visual específica.
Cor também transmite significado. Um erro marcado apenas em vermelho pode não ser identificável para quem não distingue aquele tom; acrescente texto, ícone ou forma. Um link distinguido apenas pela cor pode parecer texto comum; considere sublinhado ou outra pista persistente. Contraste suficiente não elimina a necessidade de rótulos, estrutura, ordem de foco e mensagens acessíveis. É um componente da experiência, não uma auditoria completa de acessibilidade.
A WCAG calcula contraste entre luminância relativa da cor do texto e a do fundo. O cálculo não equivale a comparar diferenças de matiz percebidas no círculo cromático. Duas cores distintas podem ter luminosidade semelhante e baixo contraste. Por isso, não confie apenas na visão subjetiva nem em uma captura vista em um monitor específico. Use uma ferramenta confiável para verificar os valores exatos aplicados pela folha de estilos.
Os critérios têm exceções e definições específicas. Texto de logotipo, conteúdo incidental e elementos inativos são tratados de modo diferente em alguns critérios. Texto grande também tem um limiar próprio e depende do tamanho e do peso da fonte segundo a WCAG. Não use uma exceção como atalho para texto que continua necessário para entender a página. Se a informação importa, crie contraste adequado ou forneça alternativa equivalente.
Contraste de texto: 1.4.3 e 1.4.6
Para conformidade AA do critério 1.4.3, texto normal e imagens de texto geralmente precisam de razão mínima de 4,5:1. Texto grande pode atender a 3:1. O nível AAA do critério 1.4.6 eleva esses valores, em regra, para 7:1 no texto normal e 4,5:1 no texto grande. O alvo do projeto depende do nível de conformidade solicitado e do contexto, mas atingir AA não substitui o restante das diretrizes.
Faça o teste com o tamanho, peso, opacidade e fundo reais. Uma cor de texto semitransparente sobre uma fotografia não tem contraste constante; a mesma tonalidade pode passar em uma área e falhar em outra. Coloque uma base sólida, adicione sobreposição cuidadosamente validada ou reposicione o texto sobre uma região uniforme. Se gradiente e textura são essenciais, verifique toda a área sob a informação, não apenas o ponto de maior contraste.
Não infira que uma cor viva é legível por ser saturada. Laranja sobre branco, amarelo sobre cinza claro e azul sobre preto variam muito conforme os valores concretos. Avalie também hover, visitado, foco e estados de erro. Um link pode passar em repouso e perder contraste ao receber hover. Inclua componentes no design system com combinações aprovadas e evite cores livres que escapem da validação.
Contraste de controles e elementos gráficos
O critério 1.4.11 da WCAG 2.2 exige contraste de pelo menos 3:1 para informações visuais necessárias para identificar componentes de interface e estados relevantes, conforme as condições do critério. Isso pode incluir contorno de campo, ícone que comunica uma ação, indicador de seleção e limites visuais de botão. Elementos puramente decorativos ou inativos podem receber tratamento diferente, mas a decisão depende da função real do elemento.
Um botão não precisa ter cada pixel em 3:1 contra todo o entorno em todas as situações; é necessário entender qual informação visual permite identificar o controle e em relação a qual cor adjacente ela é comparada. Se o texto já identifica claramente o botão, o preenchimento visual continua importante para affordance e consistência, mas não substitua a análise criteriosa da interface por uma regra simplificada. Documente as decisões com as referências aplicáveis.
Ícones finos e linhas muito estreitas podem se perder mesmo quando uma ferramenta informa razão suficiente. Contraste numérico não mede tudo sobre espessura, anti-aliasing, tamanho e qualidade de percepção. Verifique a peça em escala real, em dispositivos e estados distintos. Quando ícone representa informação essencial, combine forma reconhecível e rótulo textual. O objetivo é permitir identificação consistente, não apenas fazer uma paleta passar num relatório.
Estados de foco precisam se destacar do fundo e dos elementos vizinhos. WCAG 2.2 inclui 2.4.13 Focus Appearance no nível AAA, com parâmetros específicos para área e contraste de foco. O critério 1.4.11 também se aplica a indicadores visuais de foco sob determinadas condições. Como o escopo depende de como o foco é apresentado, mantenha um contorno visível por teclado e valide a cor em cada fundo onde o componente pode aparecer.
Como integrar contraste ao design system
Defina tokens semânticos, como texto principal, texto secundário, link, borda de controle, foco e erro, em vez de reutilizar uma cor por aparência. Cada token deve ter combinações de fundo previstas e um nível de contraste verificado. Quando o tema escuro muda a superfície, valide novamente os pares. Um token aprovado em fundo branco pode falhar em cartão cinza, imagem, modal ou página promocional.
Inclua o teste na criação de componentes e na revisão de conteúdo. Cards, botões, badges, chips, avisos, campos e tabelas frequentemente apresentam estados diferentes. Considere modo de alto contraste, tema escuro, zoom e texto ampliado. Evite texto em imagem raster sempre que HTML puder proporcionar leitura e adaptação. Se o design exige uma fotografia como fundo, garanta uma camada suficiente e examine variações da imagem.
Automatize verificações de combinações definidas em tokens e passe scanner de acessibilidade na página montada. A automação pode detectar pares e problemas comuns, mas não sabe sempre qual informação é essencial, como é o fundo final ou se uma borda tem função. Complete com inspeção manual e testes de teclado. Uma auditoria eficaz explica as falhas e aponta a combinação específica, em vez de entregar apenas um indicador geral.
A Open Leads cria sites e páginas de marketing; contraste consistente deve atravessar marca, interface e conteúdo. Veja os [serviços](/servicos), os guias no [blog](/blog) e informações da agência em [Google Partner](/google-partner). Ao planejar uma identidade visual, mantenha cores de marca e construa variações acessíveis para texto e componentes sem mudar arbitrariamente o logotipo.
Exemplo prático de revisão de botão
Uma landing page usa botão laranja claro com texto branco sobre foto de fundo. A equipe testa a área completa do botão, o texto e o foco em uma viewport móvel. Descobre que a foto muda sob o botão em alguns recortes e reduz contraste do contorno. Ela move o botão para superfície sólida, escolhe uma variação mais escura da cor para texto branco e deixa um contorno de foco mais espesso com contraste distinto.
Em seguida, verifica botões desabilitados, links, mensagens de erro e placeholders do formulário. Para cada controle, identifica qual pista permite reconhecê-lo e mede as cores finais. O estado de erro ganha texto além da borda colorida. Uma pessoa de QA navega com teclado e amplia texto; a equipe corrige a ordem de leitura que contrastes não resolveriam. O componente é então incorporado ao sistema com pares testados e documentados.
Esse processo não exige que a identidade visual abandone sua paleta. Ele cria tons funcionais e combinações seguras para diferentes superfícies. A equipe revisa templates existentes e começa por páginas com tráfego e tarefas importantes. Uma mudança de cor é validada no contexto real e monitorada por feedback e testes de acessibilidade. O critério técnico orienta decisões, enquanto a experiência de pessoas reais confirma a qualidade do uso.
Checklist de contraste visual
- Meça texto normal e grande com a relação de contraste aplicável ao nível WCAG adotado.
- Valide fundos reais, incluindo fotografia, gradiente, transparência e temas alternativos.
- Confira bordas, ícones, indicadores de seleção e controles necessários para reconhecer a interface.
- Teste foco de teclado, hover, erro, sucesso, seleção e estado desabilitado.
- Não use cor como único modo de comunicar link, erro, status ou instrução.
- Combine ferramentas automáticas com inspeção humana em escala real e navegação por teclado.
- Registre tokens semânticos e pares aprovados para que novas páginas mantenham o padrão.
Perguntas frequentes
Qual contraste é recomendado para texto normal?
Para o critério AA 1.4.3 da WCAG, normalmente 4,5:1. Texto grande tem limite de 3:1, considerando as definições da diretriz.
Ícones também precisam de contraste?
Quando a informação visual é necessária para identificar um componente ou estado, o critério de contraste não textual pode se aplicar. Analise sua função.
Passar num verificador garante acessibilidade?
Não. Ele verifica pares específicos, mas não substitui avaliação de semântica, foco, tamanho, contexto, conteúdo ou tecnologia assistiva.
Posso usar vermelho para indicar erro?
Sim, desde que não seja a única pista. Acrescente texto, ícone ou outro sinal e valide contraste e leitura da mensagem.
A paleta da marca precisa mudar?
Não necessariamente. É possível criar tons funcionais e superfícies acessíveis mantendo as cores de marca em aplicações apropriadas.
Quer transformar tráfego em oportunidades reais? A Open Leads integra mídia paga, mensuração e criação de sites focados em conversão. Conheça os serviços da Open Leads.
Fontes consultadas
Consulte os materiais originais usados na pesquisa deste artigo.
Tags
Escrito por
Equipe Open Leads
