Teste de Contraste

Verifica se texto tem contraste suficiente com fundo

Por que Contraste Importa?

Texto com bom contraste é diferença entre "consigo ler seu site" e "desisto". Não é complicado, mas é essencial.

️ Quem isso afeta?

  • 253 milhões com baixa visão - texto pequeno + contraste ruim é a combinação perfeita para exclusão
  • ☀️ Qualquer um sob luz solar - seu contraste fraco fica invisível no celular na rua
  • 📱 Telas pequenas - pixels já são minúsculos; contraste fraco faz piorar
  • 👴 Envelhecer - com 60+ anos, sua visão muda; contraste fraco vai incomodar muito
  • 🌈 Daltônicos (8% dos homens) - não é só cor que importa; o contraste salva

O que é Razão de Contraste?

A razão de contraste é um número que compara a luminosidade do texto com a do fundo.

Fórmula (WCAG):

(L1 + 0.05) / (L2 + 0.05)

Onde L1 = luminância do mais claro, L2 = luminância do mais escuro

Resultado: 1:1 (mínimo) até 21:1 (máximo)

Padrões WCAG

Texto Normal

Nível A: 3:1

Nível AA: 4.5:1 ✅ (recomendado)

Nível AAA: 7:1

Texto Grande

Nível A: 3:1

Nível AA: 3:1 ✅

Nível AAA: 4.5:1

Componentes UI

Nível A: 3:1

Nível AA: 3:1 ✅

Nível AAA: 3:1

O que o Plugin Verifica

Contraste de Texto

Verifica cada elemento de texto contra seu fundo

Calcula: Razão de contraste em tempo real

Compara com: WCAG AA (4.5:1) padrão

Fundos Complexos

Detecta imagens ou gradientes de fundo

Problema: Contraste varia em diferentes partes

Solução: Use fundo sólido ou sombra/outline

Bordas e Ícones

Verifica contraste de elementos gráficos

Requer: 3:1 para ícones/bordas significativas

Exemplos Visuais

Texto Normal - Comparação

Texto cinza claro em branco

1.2:1 ❌ Muito ruim

Texto cinza em branco

2.3:1 ❌ Ruim

Texto cinza escuro em branco

4.5:1 ✅ AA (OK)

Texto cinza muito escuro em branco

9.4:1 ✅ AAA (Ótimo)

Texto preto em branco

21:1 ✅ Máximo

Ícones - Exemplo

🔗

Ícone cinza fraco em branco

2:1 ❌
🔗

Ícone preto em branco

15:1 ✅

Problemas Comuns

Texto Cinza em Branco

Achado: "#999999" em branco = 4.3:1

Problema: Falha WCAG AA (precisa 4.5:1)

Solução: Escurecer para "#777777" (4.5:1+)

Links Azuis Fracos

Achado: Azul claro em branco = 3.2:1

Problema: Só funciona para texto grande, não normal

Solução: Usar azul mais escuro ou adicionar sublinhado

Placeholder Cinzento

Achado: Placeholder "#aaaaaa" em branco = 3.1:1

Problema: Difícil de ler para pessoas com baixa visão

Solução: Escurecer ou usar label acima do campo

Soluções Rápidas

  • Use cores mais escuras para texto
  • Mude o fundo se necessário (mais claro/mais escuro)
  • Use bordas ou outlines para melhorar definição
  • Aumente o tamanho (texto grande pode ter contraste menor)

Entendendo o Relatório

Exemplo do Plugin

Elementos com contraste inadequado: 4

  • Parágrafo (linha 45): "#888" em branco = 3.2:1, precisa 4.5:1
  • Link "Ver mais" (linha 102): "#0066cc" em branco = 3.8:1, precisa 4.5:1
  • Placeholder (linha 156): "#999" em branco = 3.9:1, precisa 4.5:1
  • Ícone de rede social (linha 203): "#555" em branco = 2.6:1, precisa 3:1

Elementos WCAG AA: 34

Elementos WCAG AAA: 28

Próximos Passos

  1. Execute o teste de contraste no plugin
  2. Para cada violação, identifique a cor do texto e fundo
  3. Use um verificador de contraste online para testar novas cores
  4. Atualize o CSS com cores que atendem 4.5:1 (AA)
  5. Rode o teste novamente para validar

📚 Fontes e Referências

Deficiência Visual

Deficiência Auditiva

Deficiência Motora

Lei e Dados Brasileiros

Padrões, Diretrizes WCAG e links úteis

ℹ️ As estatísticas listadas nesta página são baseadas em fontes confiáveis e oficiais. Para dados mais recentes ou específicos, consulte os links de referência acima.