Contraste de cores mede a diferença de luminância entre texto e fundo, e define quem consegue ler sua página. Segundo a WebAIM (2024), a WCAG exige relação mínima de 4.5:1 para texto normal. Abaixo de 3:1, leitores com baixa visão perdem o texto. Audite com WAVE e corrija nos tokens do tema.

O contraste de cores é a razão matemática entre a luminância da cor do texto e a do fundo, num intervalo que vai de 1:1 (ilegível) até 21:1 (preto sobre branco). Não é gosto estético: é o critério 1.4.3 da WCAG 2.2 que decide se uma pessoa com baixa visão, daltonismo ou tela sob sol forte lê o seu conteúdo. No suporte da FULL, a gente vê que paletas reprovadas quase sempre vêm de um cinza-claro herdado do tema, não de uma escolha consciente. Este guia mostra como medir, corrigir e validar o contraste de cores num site WordPress sem destruir a identidade da marca. O ponto de partida é a acessibilidade web (WCAG) e a régua oficial de 4.5:1.

Primeiros passos: O que a WCAG mede no contraste de cores

A WCAG mede contraste de cores por luminância relativa, não por nome de cor: texto normal exige 4.5:1, texto grande (24 px ou 18,66 px em negrito) baixa para 3:1, e bordas e botões pedem 3:1. A tabela abaixo resume os três limites que mais reprovam sites WordPress no WAVE e no Lighthouse.

A confusão mais frequente nos tickets é usar a mesma régua para texto grande e normal. Um título de 32 px aprova em 3:1, mas o parágrafo abaixo reprova. Veja a relação com ranqueamento no guia de legibilidade e SEO no WordPress.

Por que o contraste de cores reprova mesmo com cores bonitas

O contraste de cores reprova porque o olho percebe brilho de forma não linear: duas cores vibrantes podem ter luminância parecida, como laranja sobre verde, que vibra mas fica em 1.6:1. O gatilho mais comum no WordPress é técnico: texto cinza-claro #999999 sobre fundo branco entrega 2.85:1 e reprova no critério 1.4.3 da WCAG, sem aviso ao administrador.

Há ainda o caso do modo escuro automático. Um tema com cor de link herdada do Elementor, sem token de contraste definido, somado ao modo escuro do navegador, deixa o link invisível sobre fundo escuro. O administrador testa no desktop claro, vê tudo certo e publica. A ferramenta Stark e o WAVE pegam esses casos antes do usuário. Daltonismo entra na conta: cerca de 8% dos homens têm alguma deficiência de visão de cor, e vermelho sobre verde, o pior par possível, é justamente o que some para eles.

Como medir o contraste de cores em 5 passos

Medir o contraste de cores leva de 15 a 30 minutos com três ferramentas gratuitas: WAVE para varrer a página, o Lighthouse no Chrome DevTools para o score, e o verificador da WebAIM para o par exato. A sequência abaixo segue a ordem que a gente usa no suporte da FULL, com critério de aprovado ou reprovado em cada passo.

Legenda: o WAVE marca em vermelho cada texto que fica abaixo de 4.5:1, apontando o elemento exato no DOM.

Passo 1: Rode o WAVE na página mais visitada

Instale a extensão WAVE no Chrome e rode na sua página de maior tráfego, identificada no Rank Math Analytics. O painel lista cada falha de contraste com a relação atual (ex: 2.8:1) e o seletor CSS do elemento. Anote os três piores. Critério: zero ícones vermelhos de “contrast errors” na coluna de detalhes.

Passo 2: Confirme o par exato na WebAIM

Copie a cor do texto e a do fundo (em hexadecimal) e cole no verificador da WebAIM. Ele devolve a relação numérica e marca “Pass” ou “Fail” para AA normal, AA grande e AAA. Critério: o par precisa marcar “Pass” em “Normal Text AA” para corpo de texto.

Passo 3: Ajuste a cor no token do tema, não no bloco

Em vez de mudar a cor bloco a bloco, ajuste o token. Em temas com edição completa do site (FSE), edite a paleta global no theme.json ou em Estilos Globais; no Elementor, mude a cor no System Colors. Escurecer um cinza de #999999 para #595959 sobe a relação de 2.85:1 para 7:1. Critério: a cor nova passa no Passo 2.

Passo 4: Valide botões, links e bordas separadamente

Texto não é tudo. Rode o Lighthouse (aba Accessibility) e verifique se botões, estados de foco e bordas de campo batem 3:1. Links dentro de parágrafo precisam de contraste suficiente com o texto ao redor, não só com o fundo. Critério: score de acessibilidade do Lighthouse acima de 95.

Passo 5: Reteste em modo escuro e mobile

Ative o modo escuro do sistema e recarregue a página; depois teste no celular sob luz forte. Tokens mal definidos só quebram aqui. Use o emulador de visão de cor do DevTools para simular daltonismo. Critério: o texto permanece legível nos três cenários sem ajuste manual.

Quanto custa corrigir contraste de cores e onde a FULL entra

Corrigir contraste de cores custa R$0 em licença: WAVE, Lighthouse e o verificador da WebAIM são gratuitos, e o ajuste vive nos tokens do tema. O custo real é o tempo de quem sabe onde mexer sem quebrar o layout. Em sites com paleta espalhada por dezenas de blocos, uma auditoria manual passa de 2 horas, e centralizar por token economiza o dia.

Para quem gerencia vários sites, a conta muda de escala. O plano PRO da FULL sai por R$849 e cobre 10 sites, o que dá R$85 por site, com Elementor, Rank Math e o stack de plugins que padroniza a paleta global de cada projeto pelo mesmo painel. A gente vê no suporte que equipes que tratam contraste de cores por token, e não bloco a bloco, fecham a correção em minutos por site. Conheça os planos da FULL para entender o argumento de R$85 por site na prática.

Erros de contraste de cores que mais derrubam sites WordPress

O erro número 1 de contraste de cores é confiar no olho em vez do número: uma cor “parece” legível no monitor do designer e reprova na tela barata do usuário. O segundo é tratar placeholder de formulário como decorativo, quando ele precisa de 4.5:1 como qualquer corpo de texto. O terceiro é texto sobre imagem sem camada de sobreposição.

Há um padrão técnico que só aparece em escala. Em temas com edição completa do site (FSE) e paleta global no theme.json, mudar uma cor no Global Styles propaga para botões, links e badges de uma vez. Ajustar o token, em vez de cada bloco, evita corrigir o mesmo contraste de cores em dezenas de lugares. Vale revisar o impacto no Core Web Vitals, já que paletas ruins vêm com CSS inflado.

Contraste de cores, marca e os limites práticos da paleta

Manter contraste de cores forte sem apagar a marca tem saída na maioria dos casos. A cor de marca raramente é a cor de texto: guarde o laranja para botões e títulos grandes, que aprovam em 3:1, e derive um tom escuro para o corpo, que exige 4.5:1. Escolher a paleta certa desde o início, como no guia de esquema de cores em projeto WordPress, evita refação.

Há limites honestos. Marcas com identidade em tons pastel sofrem: um amarelo institucional dificilmente bate 4.5:1 sobre branco, e a saída é usá-lo só em fundo escuro ou em elementos não textuais. Na frente legal, a LGPD não trata de contraste, mas acessibilidade entra cada vez mais em editais públicos, que exigem nível AA. Veja a LGPD em sites WordPress e os guias de acessibilidade da FULL.

Perguntas frequentes sobre contraste de cores

Próximos passos para um WordPress acessível

Acertar o contraste de cores é o ganho de acessibilidade mais barato e de maior impacto que um site WordPress pode ter: não exige plugin pago, vive nos tokens do tema e protege de baixa visão a daltonismo a leitura sob sol. O caminho é sempre o mesmo: meça com WAVE e WebAIM, confirme o número da WCAG, ajuste no token e revalide em modo escuro e mobile. Quem trata cor por token, e não bloco a bloco, corrige uma vez e nunca mais reabre o ticket. Para seguir aprendendo, o FULL Academy reúne os tutoriais, guias e reviews de acessibilidade e WordPress num só lugar. Complemente o contraste com texto alternativo correto, como mostra o guia de alt text com IA no WordPress, e seu site fica legível para humanos e para máquinas.