Verificador de Contraste de Cores

Verificador de Contraste de Cores - Ferramenta de Acessibilidade WCAG

Um verificador abrangente de contraste de cores que avalia combinações de cores de primeiro plano e plano de fundo contra diretrizes WCAG 2.1. Testa níveis de conformidade AA e AAA para texto normal (menos de 18pt ou 14pt negrito) e texto grande (18pt ou maior, ou 14pt negrito ou maior). Recursos incluem cálculo de razão de contraste em tempo real, ferramentas de ajuste de cores, combinações predefinidas e recomendações para melhorar acessibilidade. Essencial para designers, desenvolvedores e qualquer pessoa criando conteúdo web acessível.

O que é contraste de cores e por que ele importa?

Contraste de cores é a diferença em luminância (brilho) entre duas cores, tipicamente entre texto (primeiro plano) e seu plano de fundo. É crucial para acessibilidade web.

Por Que Importa:

Legibilidade:
- Maior contraste = mais fácil de ler
- Baixo contraste causa cansaço visual
- Crítico para conteúdo de formato longo
- Afeta velocidade de leitura e compreensão

Acessibilidade:
- Essencial para pessoas com baixa visão
- Ajuda usuários com daltonismo
- Beneficia usuários mais velhos (mudanças de visão relacionadas à idade)
- Exigido por lei em muitos países

Diretrizes WCAG:
- AA (Mínimo): 4,5:1 para texto normal
- AA (Mínimo): 3:1 para texto grande
- AAA (Aprimorado): 7:1 para texto normal
- AAA (Aprimorado): 4,5:1 para texto grande

Definições de Tamanho de Texto:
Texto Normal:
- Menos de 18pt (24px)
- Menos de 14pt (18,5px) negrito

Texto Grande:
- 18pt (24px) ou maior
- 14pt (18,5px) negrito ou maior

Impacto no Mundo Real:
- 1 em 12 homens têm deficiência de visão de cores
- 1 em 200 mulheres têm deficiência de visão de cores
- Muitos usuários têm problemas temporários de visão
- Reflexo da tela reduz contraste efetivo

Requisitos Legais:
- Seção 508 (Governo dos EUA)
- ADA (Lei dos Americanos com Deficiências)
- EN 301 549 (Padrão Europeu)
- Exigido para sites governamentais
- Cada vez mais exigido para setor privado

Como usar o verificador de contraste?

Passos simples para verificar seu contraste de cores:

1. Escolher Cores:
- Insira códigos hex manualmente (#RRGGBB)
- Use seletores de cores para seleção visual
- Aplique combinações predefinidas
- Cole cores de outras ferramentas

2. Ver Resultados:
- Razão de contraste exibida (ex: 7,2:1)
- Status de conformidade AA (Aprovado/Reprovado)
- Status de conformidade AAA (Aprovado/Reprovado)
- Resultados separados para texto normal e grande

3. Verificar Visualização:
- Veja aparência real do texto
- Amostra de texto normal
- Amostra de texto grande
- Julgue legibilidade você mesmo

4. Ajustar se Necessário:
- Use botões Clarear/Escurecer
- Experimente cores similares sugeridas
- Troque primeiro plano/plano de fundo
- Teste combinações diferentes

Entendendo Resultados:

✓ Aprovado (Verde):
- Contraste atende requisitos
- Seguro para usar
- Acessível para maioria dos usuários

✗ Reprovado (Vermelho):
- Contraste muito baixo
- Não acessível
- Deve melhorar ou usar cores diferentes

Escala de Razão de Contraste:
- 21:1 = Máximo (preto sobre branco)
- 7:1 = AAA para texto normal
- 4,5:1 = AA para texto normal
- 3:1 = AA para texto grande
- Abaixo de 3:1 = Falha em todos os padrões

Dicas:
- Teste com tamanho real de conteúdo
- Considere várias condições de iluminação
- Verifique em dispositivos diferentes
- Teste com simuladores de daltonismo
- Verifique com usuários reais quando possível

O que são níveis WCAG AA e AAA?

WCAG (Diretrizes de Acessibilidade de Conteúdo Web) define níveis de acessibilidade:

Nível AA (Conformidade Mínima):

Texto Normal:
- Razão: 4,5:1 mínimo
- Requisito mais comum
- Equilíbrio de acessibilidade e design
- Exigido pela maioria das leis

Texto Grande:
- Razão: 3:1 mínimo
- Mais tolerante para cabeçalhos
- Aplica-se a 18pt+ ou 14pt+ negrito

Quando Usar AA:
- Sites padrão
- Maioria de aplicações comerciais
- Mínimo de conformidade legal
- Bom equilíbrio para maioria dos usuários

Nível AAA (Conformidade Aprimorada):

Texto Normal:
- Razão: 7:1 mínimo
- Acessibilidade maior
- Mais restritivo
- Melhor para conteúdo crítico

Texto Grande:
- Razão: 4,5:1 mínimo
- Mesmo que AA texto normal
- Ainda desafiador para alguns pares de cores

Quando Usar AAA:
- Sites governamentais
- Instituições educacionais
- Aplicações de saúde
- Serviços financeiros
- Informação crítica
- Sites para adultos mais velhos

Desafios AAA:
- Limita escolhas de design
- Mais difícil de alcançar com cores de marca
- Nem sempre possível com todas as paletas
- Pode conflitar com identidade de marca

Abordagem Prática:
- Almeje AA mínimo em todos os lugares
- Use AAA para texto de corpo quando possível
- AA aceitável para alguns elementos de UI
- AAA para ações/informações críticas
- Teste com usuários reais

Exceções:
- Logos (sem requisito)
- Elementos inativos/desabilitados
- Decoração pura
- Texto em imagens (evite se possível)

Como a razão de contraste é calculada?

A fórmula matemática para razão de contraste:

Fórmula:
Razão de Contraste = (L1 + 0,05) / (L2 + 0,05)

Onde:
- L1 = Luminância relativa da cor mais clara
- L2 = Luminância relativa da cor mais escura
- 0,05 = Constante para prevenir divisão por zero

Calculando Luminância Relativa:

1. Converter RGB para decimal (0-1):
R = Vermelho / 255
G = Verde / 255
B = Azul / 255

2. Aplicar correção gama:
Se RGB ≤ 0,03928:
RGB = RGB / 12,92
Senão:
RGB = ((RGB + 0,055) / 1,055) ^ 2,4

3. Calcular luminância:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B

Por Que Esses Números?
- Baseado em percepção humana
- Verde contribui mais (71,52%)
- Vermelho contribui moderadamente (21,26%)
- Azul contribui menos (7,22%)
- Corresponde a como nossos olhos realmente funcionam

Exemplos:

Preto (#000000) sobre Branco (#FFFFFF):
- L1 (branco) = 1,0
- L2 (preto) = 0,0
- Razão = (1,0 + 0,05) / (0,0 + 0,05)
- Razão = 1,05 / 0,05 = 21:1 (Máximo)

Azul Escuro (#0000FF) sobre Branco (#FFFFFF):
- L1 (branco) = 1,0
- L2 (azul) = 0,0722
- Razão = (1,0 + 0,05) / (0,0722 + 0,05)
- Razão = 1,05 / 0,1222 = 8,59:1 (Aprovado AAA)

Nossa ferramenta lida com tudo isso automaticamente!

Notas Importantes:
- Razão é sempre ≥ 1:1
- Número maior = melhor contraste
- Máximo possível = 21:1
- Mínimo útil = 3:1

E se minhas cores não passarem?

Várias estratégias para melhorar contraste falhando:

1. Ajustar Claridade:

Clarear Plano de Fundo:
- Torne plano de fundo mais claro
- Mantenha primeiro plano igual
- Geralmente abordagem mais fácil
- Use botão Clarear na ferramenta

Escurecer Primeiro Plano:
- Torne texto mais escuro
- Mantenha plano de fundo igual
- Bom para fundos claros
- Use botão Escurecer na ferramenta

2. Experimentar Sugestões:
- Ferramenta fornece cores similares
- Mantém matiz similar
- Passa padrões automaticamente
- Clique em cores sugeridas para aplicar

3. Trocar Cores:
- Troque primeiro plano/plano de fundo
- Às vezes funciona instantaneamente
- Especialmente eficaz com cores complementares

4. Usar Combinações Predefinidas:
- Preto sobre branco: 21:1 (Máximo)
- Branco sobre preto: 21:1 (Máximo)
- Azul escuro sobre branco: Geralmente AAA
- Amarelo sobre preto: Geralmente AA/AAA

5. Alternativas de Design:

Adicionar Bordas:
- Borda ao redor do texto
- Cria separação
- Ajuda mas não substitui contraste

Aumentar Peso da Fonte:
- Torna texto mais negrito
- Melhora legibilidade
- Reduz contraste mínimo necessário

Aumentar Tamanho da Fonte:
- Maior = mais fácil de ler
- Move de texto normal para grande
- Requisito de contraste menor (3:1 vs 4,5:1)

Usar Sombras de Texto:
- Adiciona profundidade e separação
- Sombra clara em texto escuro
- Sombra escura em texto claro
- Use com moderação

6. Desafios de Cores de Marca:

Se Cores de Marca Falharem:
- Use cores de marca com moderação
- Aplique apenas a elementos maiores
- Use para fundos com contraste de texto suficiente
- Crie variações acessíveis
- Use cores de marca em logos/decorações

Soluções Comuns:
- Matiz mais claro de cor de marca para fundos
- Tom mais escuro para texto
- Texto branco/preto sobre fundos de marca
- Destaque de marca, não cor de texto primária

7. Testes:
- Sempre visualize com conteúdo real
- Teste em telas diferentes
- Verifique em várias iluminações
- Obtenha feedback de usuários com deficiências

Lembre-se: Acessibilidade melhora UX para todos!

Recursos Principais

• Cálculo de razão de contraste em tempo real
• Verificação de conformidade WCAG 2.1 AA
• Verificação de conformidade WCAG 2.1 AAA
• Contraste de texto normal (4,5:1, 7:1)
• Contraste de texto grande (3:1, 4,5:1)
• Visualização ao vivo de combinações de cores
• Texto de amostra em tamanho normal
• Texto de amostra em tamanho grande
• Indicadores Aprovado/Reprovado para cada nível
• Seletor de cores para primeiro plano
• Seletor de cores para plano de fundo
• Entrada manual de cor hex
• Trocar cores de primeiro plano/plano de fundo
• Ajuste de cor Clarear/Escurecer
• Sugerir cores similares que passam
• Combinações predefinidas de alto contraste
• Exibição de informações de cores (HEX, RGB, HSL)
• Cálculo de luminância relativa
• Explicações detalhadas WCAG
• Design responsivo para mobile
• Suporte a modo escuro
• Processamento 100% do lado do cliente
• Nenhum dado enviado para servidores
• Copiar códigos de cores para área de transferência
• Design focado em acessibilidade