O que é a conformidade WCAG AA e AAA?

São níveis de diretrizes de acessibilidade para conteúdo web. O nível AA exige uma taxa de contraste de 4.5:1 para textos normais, enquanto o AAA é mais rigoroso, exigindo 7:1.

Como devo formatar a entrada das cores?

Insira uma cor por linha no formato 'nome: #HEX', por exemplo, 'surface: #FFFFFF' e 'text: #111827'.

A ferramenta sugere novas cores se o contraste falhar?

Sim, o relatório de saída em JSON inclui recomendações automáticas de ajustes mínimos para que a combinação atinja a meta selecionada.

Posso testar o contraste de textos grandes separadamente?

Sim, você pode selecionar as opções 'AA Large Text (3:1)' ou 'AAA Large Text (4.5:1)' no campo de meta WCAG.

O que faz a opção 'Incluir pares da mesma cor'?

Ela testa o contraste de uma cor contra ela mesma. Geralmente falha (1:1), mas pode ser útil para gerar matrizes de teste exaustivas em sistemas de design automatizados.

Verificador de contraste de paleta acessivel | Ferramenta online grátis

Exemplos

1. Auditoria de Paleta de Marca para WCAG AA

UX/UI Designer

Contexto

Um designer está criando um novo guia de estilo e precisa garantir que as cores da marca sejam legíveis quando aplicadas em botões e textos.

Problema

Verificar manualmente dezenas de combinações de cores é demorado e sujeito a erros humanos.

Como usar

Insira as cores principais no campo 'Cores da paleta' e defina a 'Meta WCAG' como 'AA Normal Text (4.5:1)'.

brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827

Resultado

A ferramenta gera um relatório JSON mostrando que a combinação 'brand-secondary on surface' falha no contraste, sugerindo um tom mais escuro de laranja.

2. Validação de Tema Escuro (Dark Mode)

Desenvolvedor Front-end

Contexto

A equipe de desenvolvimento está implementando um tema escuro e precisa garantir que o texto cinza claro tenha contraste suficiente contra os fundos escuros.

Problema

Garantir que o novo esquema de cores atenda ao rigoroso padrão AAA para máxima acessibilidade.

Como usar

bg-dark: #121212
bg-card: #1E1E1E
text-muted: #9CA3AF
text-light: #F9FAFB

Verificador de contraste de paleta acessivel | Ferramenta online grátis | Elysia Tools

Verificador de contraste de paleta acessivel

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Auditoria de Paleta de Marca para WCAG AA

2. Validação de Tema Escuro (Dark Mode)

Perguntas frequentes

Exemplos de códigos de cor

Exemplos de Processamento de Imagem Android Java

Exemplos de Processamento de Imagem Android Kotlin

Exemplos de Processamento de Imagem Web Python

Verificador de Acessibilidade de Cores

Verificador de Contraste de Cor

Verificador de acessibilidade para visao de cores

Gerador de relatorio de auditoria de acessibilidade

Geradores de efeitos CSS, paletas e tokens de design

Ferramentas de auditoria de acessibilidade web e cores acessiveis

Ferramentas de Design de Cor e Conversão de Espaços de Cor

Ferramentas de conversao de espacos de cor para web e impressao