Comparação visual e técnica lado a lado
Simulação de deficiência de visão de cores e prévia da interface
Recursos explicados
Matriz de contraste WCAG 2.1
Calcula proporções de contraste exatas, de 1:1 a 21:1, e indica a aprovação ou reprovação nos níveis AA e AAA para legibilidade do texto.
Diferença perceptual Delta E
Mede matematicamente a distância entre cores para indicar se o olho humano percebe dois tons como diferentes.
Simulador de visão de cores
Simula em tempo real a percepção de cores nos modos protanopia, deuteranopia e tritanopia.
Correção automática inteligente de acessibilidade
Ajusta a luminosidade com um clique para alcançar a conformidade WCAG AA.
Para que você pode usar esta ferramenta?
Auditoria de acessibilidade web
Confira se o texto dos botões e as cores de fundo atendem às diretrizes WCAG antes de publicar.
Avaliação de paletas de marca
Compare as cores principais da marca com opções de cores de destaque para avaliar a legibilidade e o equilíbrio visual.
Informações da ferramenta
| Formatos compatíveis | Hex, RGB, HSL |
|---|---|
| Padrão de conformidade | WCAG 2.1 (AA e AAA) |
| Mecanismo de distância entre cores | CIE76 / Delta E perceptual |
| Processamento | 100% no navegador |
Benefícios
- Confira instantaneamente a conformidade com WCAG.
- Use prévias de deficiências de visão de cores para criar experiências acessíveis.
- Gere variáveis CSS e Tailwind com um clique.
Limitações
- Os cálculos se baseiam na renderização do espaço de cores sRGB padrão.
Processamento local e privado
Todos os cálculos de contraste e as transformações de espaço de cores acontecem localmente no navegador, sem envio de dados.
Política de privacidade
Os valores de cores comparados e as configurações de prévia não são registrados, rastreados nem salvos.
Dicas
- Para atender ao padrão WCAG AA, procure uma proporção de contraste de pelo menos 4,5:1 para textos normais.
- Use o botão Trocar para inverter rapidamente as combinações de primeiro plano e fundo.
Perguntas frequentes
Qual é uma boa proporção de contraste WCAG para o texto principal?
Para atender ao padrão WCAG AA, textos normais precisam de uma proporção mínima de 4,5:1. Para conformidade AAA, a proporção exigida é de 7:1.
O que significa o valor Delta E?
Delta E mede a diferença perceptual entre cores. Um valor inferior a 1,0 é imperceptível ao olho humano, enquanto valores acima de 5,0 indicam cores claramente diferentes.
Esta ferramenta de comparação é gratuita?
Sim. É totalmente gratuita, sem limite de uso e sem necessidade de cadastro.