Calculadora de Contraste
Verifique o contraste de cores para acessibilidade WCAG online gratis. Calcule a razao de contraste, teste conformidade AA/AAA e simule daltonismo.
Cores para Testar
Razao de Contraste
Excelente! Passa em todos os niveis WCAG
Texto Pequeno
4.5:1
Texto Grande
3:1
Texto Pequeno
7:1
Texto Grande
4.5:1
Visualizar Texto
Este e um exemplo de texto pequeno (14px). A acessibilidade e importante.
Texto medio (18px) com fonte normal
Texto Grande (24px Bold)
Simulacao de Daltonismo
Sobre Contraste e Acessibilidade
O contraste de cores e fundamental para a acessibilidade web. Aproximadamente 8% dos homens e 0.5% das mulheres tem algum tipo de deficiencia na visao de cores. Um contraste adequado garante que seu conteudo seja legivel para todos os usuarios.
Niveis WCAG
- AA Texto Pequeno: Razao minima de 4.5:1 para texto normal (menor que 18px ou 14px bold)
- AA Texto Grande: Razao minima de 3:1 para texto grande (18px+ ou 14px+ bold)
- AAA Texto Pequeno: Razao minima de 7:1 para texto normal - nivel mais rigoroso
- AAA Texto Grande: Razao minima de 4.5:1 para texto grande - nivel mais rigoroso
Tipos de Daltonismo
Deuteranopia (dificuldade com verde) e protanopia (dificuldade com vermelho) sao os tipos mais comuns. Tritanopia (dificuldade com azul) e mais rara. Testar suas cores com simulacoes ajuda a garantir que seu design funcione para todos.
Dicas de Acessibilidade
Nunca dependa apenas da cor para transmitir informacao - use tambem icones, textos ou padroes. Teste seu design com diferentes simulacoes de daltonismo. Use ferramentas de contraste durante o desenvolvimento, nao apenas no final.
Perguntas Frequentes
WCAG (Web Content Accessibility Guidelines) são diretrizes de acessibilidade web. Definem requisitos mínimos de contraste para legibilidade.