Verificador de contraste
Verifique se sua combinação de cores atende aos padrões de acessibilidade WCAG.
Sobre Verificador de contraste
O Verificador de Contraste de Cores da GuruAlpha mede a taxa de contraste entre as cores de primeiro plano e de fundo de acordo com os padrões WCAG (Diretrizes de Acessibilidade para Conteúdo Web). Insira quaisquer duas cores e a ferramenta calcula sua taxa de contraste, informando se a combinação atende aos padrões de acessibilidade AA ou AAA para texto normal e grande.
A acessibilidade web é tanto um imperativo moral quanto uma exigência legal. As diretrizes WCAG 2.1 estabelecem taxas mínimas de contraste para garantir que o texto seja legível por pessoas com deficiências visuais, incluindo daltonismo, baixa visão e declínio visual relacionado à idade. O verificador de contraste facilita a conformidade ao fornecer feedback instantâneo sobre suas escolhas de cor.
A ferramenta calcula as taxas de contraste usando a fórmula de luminância relativa especificada na WCAG 2.1. Uma taxa de 1:1 significa ausência de contraste (mesma cor). Uma taxa de 21:1 é o contraste máximo (preto sobre branco). Os requisitos WCAG são: texto normal AA exige 4.5:1, texto grande AA exige 3:1, texto normal AAA exige 7:1 e texto grande AAA exige 4.5:1. A ferramenta mostra claramente se sua combinação de cores atende a cada limite.
A pré-visualização visual mostra a cor do seu texto sobre a cor de fundo, dando uma visão real da legibilidade. A pré-visualização inclui amostras de texto normal (16px) e grande (24px+), pois tamanhos diferentes têm requisitos WCAG distintos. Os indicadores de aprovado/reprovado são atualizados em tempo real conforme você ajusta as cores.
Para desenvolvedores e designers web, o verificador de contraste é essencial para garantir que os sites sejam acessíveis a todos os usuários. Ele se integra naturalmente ao fluxo de trabalho de design: escolha as cores, verifique o contraste, ajuste se necessário e prossiga com a confiança de que seu texto é legível.
Principais recursos do Verificador de contraste
- Cálculo da taxa de contraste entre quaisquer duas cores
- Verificação de conformidade com WCAG AA e AAA
- Limites de texto normal (4.5:1) e texto grande (3:1)
- Pré-visualização ao vivo do texto sobre o fundo
- Ajustes de cor sugeridos para atender aos padrões
- Suporte a entrada em HEX, RGB e HSL
- Funciona em todos os dispositivos
- Sem necessidade de cadastro
Como usar Verificador de contraste
- Abra o Verificador de Contraste na GuruAlpha.
- Insira ou selecione a cor de primeiro plano (texto).
- Insira ou selecione a cor de fundo.
- Veja a taxa de contraste e o status de conformidade WCAG.
- Verifique os requisitos tanto de texto normal quanto grande.
- Ajuste as cores se a combinação não passar.
- Use os ajustes sugeridos para atender AA ou AAA.
Dicas para usar Verificador de contraste
- A conformidade AA (4.5:1) é o mínimo para sites públicos.
- A conformidade AAA (7:1) é preferível para a máxima acessibilidade.
- Texto grande (18px em negrito ou 24px normal) tem requisitos de contraste mais baixos.
- Não dependa apenas da cor para transmitir informações — adicione rótulos de texto ou padrões.
- Teste com simuladores de daltonismo para verificação adicional de acessibilidade.
Perguntas frequentes sobre Verificador de contraste
O que é WCAG?
WCAG (Diretrizes de Acessibilidade para Conteúdo Web) é o padrão internacional de acessibilidade web. Define os requisitos para tornar o conteúdo acessível a pessoas com deficiência.
De qual taxa de contraste eu preciso?
Texto normal AA: 4.5:1. Texto grande AA: 3:1. Texto normal AAA: 7:1. Texto grande AAA: 4.5:1. Busque no mínimo a conformidade AA.
O que é considerado "texto grande"?
18px (24pt) de peso normal ou 14px (18.66pt) de peso negrito. O texto grande tem requisitos de contraste mais baixos porque caracteres maiores são mais fáceis de ler.
Isso verifica elementos que não são texto?
A ferramenta foca no contraste do texto. A WCAG também exige contraste de 3:1 para componentes de UI que não são texto, que você pode verificar manualmente com a mesma ferramenta.