| Elemento | Relação mínima (AA) | Erro comum no WordPress |
|---|---|---|
| Texto normal | 4.5:1 | Cinza #999 sobre branco entrega só 2.85:1 |
| Texto grande (24 px+) | 3:1 | Subtítulo claro herdado do tema reprova |
| Botões e bordas | 3:1 | Borda de input cinza sobre fundo branco some |
| Nível AAA (texto) | 7:1 | Meta de governo e saúde, raro em blogs |
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. ---Porque a WCAG mede luminância, não diferença de matiz. Duas cores vibrantes como laranja e verde parecem opostas, mas têm brilho parecido e ficam em torno de 1.6:1, bem abaixo dos 4.5:1 exigidos. O olho percebe contraste de cor, e a norma mede contraste de luz. Por isso você precisa do número do verificador WebAIM, não da impressão visual na tela.
Sim, na maioria dos casos. A cor de marca quase nunca é a cor de texto: você mantém o tom da marca em botões e títulos grandes, que aprovam em 3:1, e deriva um tom mais escuro para o corpo do texto, que exige 4.5:1. Em temas FULL Site Editing, isso se resolve num token só no theme.json. A marca permanece e o contraste de cores passa.
A WCAG 2.2 no nível AA exige 4.5:1 para texto normal e 3:1 para texto grande (24 px ou 18,66 px em negrito) e para componentes de interface como bordas e botões. O nível AAA sobe para 7:1 no texto normal, meta comum em sites de governo e saúde. Para a maioria dos blogs e lojas, atingir 4.5:1 no corpo já entrega conformidade.
Entre 15 e 30 minutos numa página média, usando WAVE para a varredura e a WebAIM para confirmar os pares suspeitos. Sites com paleta espalhada por dezenas de blocos levam mais, perto de duas horas, e é aí que centralizar a cor num token do theme.json acelera tudo. Corrigir o token resolve o contraste de cores em todos os blocos de uma vez.
O texto grande tem régua mais folgada: aprova em 3:1, enquanto o texto normal precisa de 4.5:1. Conta como grande o texto a partir de 24 px, ou 18,66 px se estiver em negrito. Por isso um título claro pode aprovar e o parágrafo abaixo, na mesma cor, reprovar. Sempre teste o corpo do texto pela régua de 4.5:1, que é a mais exigente.