Verificador de Paleta de Cores Acessível: Teste Toda a Sua Paleta para Conformidade com a WCAG

Verificar apenas um par de cores (texto e fundo) é um bom começo — mas interfaces reais usam muitas cores. Títulos, texto, botões, cartões e bordas criam dezenas de pares possíveis de texto sobre fundo.
Um verificador de paleta de cores acessível testa todas as combinações da sua paleta para que você saiba quais pares atendem à WCAG e quais falham antes de publicar.

O Accessible Color Palette Checker da Tooladex permite adicionar de 2 a 8 cores e exibe uma matriz de contraste e um resumo para todos os pares texto/fundo. Não é necessário criar conta nem enviar arquivos — tudo é processado no seu navegador.

---

Por Que Verificar a Paleta Inteira?

Verificadores de contraste de um único par (como o nosso Color Contrast Checker) são ótimos para validar uma combinação específica.
Mas sistemas de design e paletas de marca têm vários papéis:

• Fundos: página, cartões, seções, campos
• Texto: títulos, corpo, legendas, links
• UI: botões, bordas, ícones, estados de foco

Qualquer um desses papéis pode aparecer sobre outro.
Se você só testa “texto principal sobre fundo da página”, pode não perceber que “legenda sobre cartão” ou “texto de botão sobre cor primária” falha.
Um verificador de paleta testa todos os pares para oferecer uma visão completa.

---

O Que a Ferramenta Faz

1. Adicione suas cores — Insira de 2 a 8 cores em formato hex (via seletor ou digitando). Adicione ou remova amostras conforme necessário.
2. Veja o resumo — Número total de combinações, quantas passam no nível WCAG AA (texto normal) e a lista das que falham.
3. Use a matriz de contraste — Uma tabela para cada combinação “cor do texto sobre cor de fundo” com a razão de contraste e o status Aprovado/Reprovado para AA texto normal.
4. Copie o relatório — Copie com um clique as cores, o resumo e todas as combinações para colar em documentos ou tickets.
5. Teste presets — Carregue paletas de exemplo rapidamente para entender como a matriz e o resumo funcionam.

Todos os cálculos usam a mesma fórmula de luminância relativa e contraste WCAG que o verificador de par único. Nenhum dado é enviado para o servidor.

---

Níveis WCAG (Resumo Rápido)

• AA texto normal — Mínimo de 4.5:1 para texto comum (menos de 18 pt / 14 pt em negrito). É o alvo padrão para corpo de texto.
• AAA texto normal — 7:1 para contraste aprimorado.
• AA texto grande — 3:1 para texto grande (18 pt+ ou 14 pt+ em negrito).
• UI / Gráficos — 3:1 para componentes e elementos gráficos significativos.

O verificador de paleta destaca na matriz a aprovação/reprovação para AA texto normal; o relatório completo e o resumo ajudam a enxergar quantos pares atendem a cada nível.

---

Quando Usar um Verificador de Paleta

• Sistemas de design — Antes de consolidar cores de marca ou UI, verifique todos os pares texto/fundo planejados.
• Temas múltiplos — Tema claro/escuro ou várias paletas: garanta que cada tema seja acessível como um conjunto.
• Auditorias — Liste rapidamente quais combinações de uma paleta existente falham e precisam de ajustes.
• Documentação — Exporte o relatório para documentar pares aprovados para a equipe ou clientes.

---

Boas Práticas para Paletas Acessíveis

• Tenha um bom intervalo — Cinzas ou tons pastéis muito parecidos costumam falhar quando usados um sobre o outro. Mantenha uma mistura de valores claros e escuros para ter pares texto/fundo válidos.
• Nomeie papéis — Na documentação, nomeie cores por função (por exemplo, “Fundo da página”, “Texto principal”) e use a matriz para confirmar que cada combinação de papéis é aprovada.
• Teste cedo — Use o verificador de paleta ao escolher ou refinar cores para corrigir problemas de contraste antes da implementação.

---

Experimente o Accessible Color Palette Checker

O Accessible Color Palette Checker da Tooladex oferece:

• Resumo da paleta (total de pares, quantidade de aprovações/reprovações)
• Matriz de contraste para cada combinação texto/fundo
• Adição/remoção de 2–8 cores com presets para começar rapidamente
• Cópia do relatório completo para documentação ou tickets
• Processamento 100 % local — suas cores nunca saem do seu dispositivo

Use‑o junto com o Color Contrast Checker quando precisar validar um único par, ou sozinho quando quiser avaliar uma paleta inteira.