Verificador de Acessibilidade de Cores — Contraste WCAG e Simulação de Daltonismo
Um verificador gratuito de contraste WCAG 2.1 para testar qualquer combinação de cores em relação aos padrões de acessibilidade. Verifique a legibilidade do texto para conformidade nos Níveis AA e AAA — essencial para design web inclusivo.
Verifique pares de cores para conformidade de contraste WCAG e distinguibilidade para daltônicos
Como Usar
- Escolha ou insira cores de primeiro plano e plano de fundo usando os seletores de cores ou entradas hex/RGB.
- Veja a visualização de texto ao vivo e verifique os resultados de conformidade WCAG AA/AAA.
- Revise a faixa de simulação de daltonismo para ver como cada tipo de DVC percebe suas cores.
- Se alguma verificação falhar, clique em uma alternativa sugerida para corrigir o par de cores instantaneamente.
- Use o modo Paleta em Massa para verificar todas as combinações da paleta do seu sistema de design.
Recursos
Perguntas Frequentes
O que é a relação de contraste WCAG?
As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem relações de contraste mínimas entre cores de texto e fundo. O nível AA exige 4,5:1 para texto normal e 3:1 para texto grande (18pt+). O nível AAA exige 7:1 para texto normal e 4,5:1 para grande. Proporções mais altas significam melhor legibilidade.
O que é daltonismo (DVC)?
A Deficiência na Visão de Cores (DVC) afeta cerca de 8% dos homens e 0,5% das mulheres no mundo todo. Os tipos mais comuns são protanopia (cego para vermelho) e deuteranopia (cego para verde). Esta ferramenta simula como seus pares de cores aparecem para pessoas com cada tipo, ajudando você a projetar para todos.
Como funciona o recurso de sugestão automática?
Quando seu par de cores falha nas verificações WCAG ou DVC, a ferramenta busca cores próximas que passam em todos os critérios. Ela ajusta a luminosidade mantendo o matiz semelhante, para que as cores sugeridas ainda combinem com sua intenção de design, sendo acessíveis.
Meus dados são privados?
Sim, 100%. Todos os cálculos de cores acontecem diretamente no seu navegador usando JavaScript. Nenhuma cor, paleta ou dado é enviado a qualquer servidor. Você pode até usar esta ferramenta offline após o primeiro carregamento.
O que é Delta E e por que é importante?
Delta E (CIE2000) mede a diferença perceptual entre duas cores. Um Delta E abaixo de 1 significa que duas cores são virtualmente idênticas ao olho humano. Para acessibilidade, recomendamos um Delta E mínimo de 10 entre primeiro plano e plano de fundo em todas as simulações de DVC para garantir a distinguibilidade.
