Contraste de Cor (Acessibilidade)

Contraste de cor é a diferença de luminosidade entre duas cores adjacentes — tipicamente entre o texto e o fundo onde ele aparece. Contraste adequado é fundamental para legibilidade e acessibilidade web. WCAG estabelece ratios mínimos para garantir que pessoas com baixa visão, daltonismo ou em ambientes com luz forte consigam ler conteúdo. Para texto normal, o mínimo é 4.5:1; para texto grande, 3:1.

O que é contraste de cor?

Contraste de cor é medido como razão entre a luminância da cor mais clara e da mais escura. Resultado é número entre 1 (cores idênticas, sem contraste) e 21 (preto puro sobre branco puro, contraste máximo). Quanto maior o número, mais legível.

O cálculo segue fórmula específica do WCAG: luminância relativa de cada cor é calculada considerando os componentes RGB e ajustes para percepção humana. A razão é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância da cor mais clara.

Para o usuário, contraste adequado significa conseguir ler sem esforço. Para pessoas com baixa visão, contraste insuficiente pode tornar o conteúdo completamente ilegível. Para daltônicos, certas combinações de cores ficam indistinguíveis. Para todos em ambientes com luz forte (sol direto, ambientes externos), contraste alto é a diferença entre conseguir ou não ler a tela.

Em sites WordPress, contraste de cor é decisão de design que afeta tema, configurações de página e conteúdo. Designer escolhe paleta. Tema implementa. Editor pode quebrar com escolhas custom no Elementor — então atenção contínua é necessária.

Ratios de contraste WCAG

Quatro thresholds principais cobrem a maioria dos casos.

Texto normal: 4.5:1 (AA)

Texto regular abaixo de 18px (ou abaixo de 14px bold) precisa de contraste mínimo 4.5:1. Esse é o limite para nível AA do WCAG, recomendado para sites comerciais. A maioria dos parágrafos e textos de UI cai nessa categoria.

Texto grande: 3:1 (AA)

Texto grande (18px+ regular ou 14px+ bold) tem limite mais permissivo de 3:1. A justificativa: texto maior já é mais legível por natureza, então pode ter contraste menor. Headlines, hero text e títulos grandes geralmente cabem aqui.

Texto normal: 7:1 (AAA)

Para nível AAA (excelência), o limite sobe para 7:1 em texto normal. Atinge-se com cores muito escuras sobre fundos muito claros (ou vice-versa). Não obrigatório para a maioria dos sites, mas indicado para conteúdo crítico (saúde, governo, financeiro).

Componentes gráficos: 3:1 (AA)

Bordas de inputs, ícones funcionais, indicadores de estado precisam de contraste 3:1 com fundo. Esse critério foi adicionado em WCAG 2.1 — versões antigas focavam só em texto. Em formulários modernos, atender requer cuidado com cinza claro de bordas.

Como medir contraste de cor

Quatro ferramentas cobrem necessidades de medição.

WebAIM Contrast Checker

Ferramenta online gratuita em webaim.org/resources/contrastchecker. Insira hex code do texto e do fundo, ela calcula o ratio e indica se passa em AA texto normal, AA texto grande, AAA texto normal, AAA texto grande. Padrão da indústria para validação rápida.

Chrome DevTools

Inspecionar elemento (F12), aba Styles. Ao clicar no quadrado de cor, abre color picker que mostra ratio de contraste com o fundo automaticamente. Indica linha que separa AA e AAA. Útil para auditar páginas existentes elemento por elemento.

Ferramenta do Figma

Plugins como Contrast Checker, Stark e Able adicionam validação de contraste diretamente no Figma. Designer vê o ratio em tempo real ao trabalhar. Padrão profissional em times que tomam acessibilidade a sério desde o design.

Plugin WordPress

Plugins como WP Accessibility incluem ferramentas de validação de contraste no admin. Auditoria automática de páginas e identificação de combinações problemáticas. Útil para sites com muitos editores adicionando conteúdo regularmente.

Contraste de cor no WordPress

Em Elementor, defina cores no Site Settings > Global Colors com contraste validado. Use só essas cores em todos os elementos. Reduz risco de criar combinações ruins acidentalmente. Auditar conteúdo antes de publicar.

Em temas FSE com theme.json, defina paleta com contraste validado. Bloco Gutenberg força usuário a escolher dentre cores definidas, evitando improvisos. Ajuda manter consistência mesmo com vários editores.

Para sites com tema custom, validar contraste é parte da QA antes de ir para produção. Use Lighthouse, WAVE ou axe para escanear e identificar problemas. Corrija antes do deploy. Pós-deploy, faça reauditoria periódica — conteúdo novo pode quebrar acessibilidade.

Cuidado especial com texto sobre imagem. Hero sections com texto sobreposto a foto frequentemente falham em contraste. Adicione overlay escuro semi-transparente sob o texto, ou aplique text-shadow forte. Validar em diferentes posições da imagem (não só onde testou).

Erros comuns de contraste

Erro um: cinza claro em texto secundário. “Texto auxiliar pode ser mais discreto” — sim, mas precisa passar em AA. Cinza médio (entre #767676 e #6B6B6B em fundo branco) é o mínimo aceitável. Mais claro que isso falha. Veja na paleta de cores.

Erro dois: hover state com cor pastel. Botão azul que ao hover vira azul mais claro pode perder contraste. Sempre validar todos os estados (default, hover, focus, active, disabled). Se um falha, ajustar.

Erro três: depender só da cor para feedback. Erro em vermelho, sucesso em verde. Daltônicos podem não distinguir. Combine cor com ícone, texto ou padrão. Mensagem de erro vermelha + ícone de alerta + texto “Erro: campo obrigatório”.

Erro quatro: dark mode sem revalidação. Site light mode com bom contraste pode falhar em dark mode. Cores que funcionam sobre branco podem desaparecer sobre preto. Revalidar contraste em ambos os modos.

Erro cinco: anúncios e widgets de terceiros. Você controla o site, mas não anúncios injetados. Se a área tem texto, valide visualmente — não dá para mudar paleta de anúncios, mas pode escolher posicioná-los onde não impactem leitura crítica.

Quando o contraste alto é ruim?

Contraste excessivo (preto puro sobre branco puro) pode causar fadiga visual em leitura longa. O olho ajusta a luz refletida e o branco puro pode parecer ofuscante, especialmente em telas brilhantes. Por isso, designers experientes preferem cinza muito escuro (#1A1A1A ou #0F0F0F) sobre cinza muito claro (#FAFAFA), em vez de preto puro sobre branco puro.

Esse ajuste mantém contraste excelente (ainda passa em AAA com folga) mas reduz brilho extremo. Resultado: leitura mais confortável em sessões longas, sem sacrificar acessibilidade.

Em headlines artísticas, contraste extremo pode prejudicar legibilidade quando combinado com fontes display ornamentadas. Ajustar tamanho, peso ou simplicidade da fonte ajuda manter equilíbrio entre estética e função.

Lembre-se: o objetivo é boa experiência para todos. Contraste mínimo do WCAG é o piso, não o teto — mas exagero também tem custo. Equilíbrio é a chave.

Perguntas frequentes

Qual o contraste mínimo aceitável? Para texto normal (abaixo de 18px ou 14px bold), 4.5:1 (nível AA do WCAG). Para texto grande, 3:1. Para componentes gráficos não-textuais (ícones funcionais, bordas de input), 3:1. Esses são os mínimos legais e funcionais para acessibilidade.

Texto branco em cor pastel passa no WCAG? Geralmente não. Cores pastel (azul claro, rosa claro, verde menta) têm luminância alta. Texto branco sobre elas raramente atinge 4.5:1. Para CTAs em fundos pastel, texto preto (ou cinza muito escuro) é o mais seguro. Sempre valide com WebAIM Contrast Checker.

Como ajustar contraste sem mudar a marca? Mantenha a cor primária da marca para elementos onde texto é grande (headlines, logo). Para texto pequeno (corpo, legendas), use versão escurecida da cor primária ou neutro escuro. A identidade visual é mantida onde aparece com força; legibilidade é garantida onde mais importa. Veja também design system para sistematizar.

Sites WordPress com identidade forte e acessibilidade: conheça a FULL Services. Os planos PRO entregam WordPress com tema acessível, paletas validadas e acessibilidade WCAG AA por padrão.