Fatos principais
- Categoria
- Design
- Tipos de entrada
- textarea, select, checkbox
- Tipo de saída
- json
- Cobertura de amostras
- 4
- API disponível
- Yes
Visão geral
O Verificador de Contraste de Paleta Acessível é uma ferramenta essencial para designers e desenvolvedores que precisam garantir que suas interfaces atendam às diretrizes de acessibilidade WCAG 2.1. Ao inserir as cores da sua marca ou sistema de design, a ferramenta audita automaticamente todas as combinações possíveis de primeiro plano e fundo, identificando quais pares falham nos critérios AA ou AAA e sugerindo ajustes para melhorar a legibilidade.
Quando usar
- •Ao criar ou atualizar um sistema de design (Design System) para garantir que todas as cores base sejam acessíveis desde o início.
- •Durante a auditoria de acessibilidade de um site ou aplicativo existente para identificar problemas de contraste em textos e elementos visuais.
- •Na definição de paletas de cores para novas marcas, validando se as cores institucionais podem ser usadas juntas na web.
Como funciona
- •Insira a sua paleta de cores no campo de texto, utilizando o formato 'nome: #HEX' (ex: brand-primary: #1D4ED8).
- •Selecione a meta de conformidade WCAG desejada, como AA para texto normal (4.5:1) ou AAA para texto grande (4.5:1).
- •Opcionalmente, escolha se deseja incluir a verificação de pares da mesma cor na matriz de resultados.
- •A ferramenta processa as combinações e gera um relatório JSON detalhado com as taxas de contraste, indicando aprovações, falhas e recomendações de ajuste.
Casos de uso
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)'.
- Configuração de exemplo
-
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
- Cole os tokens de cor do tema escuro e selecione 'AAA Normal Text (7:1)' no menu suspenso.
- Configuração de exemplo
-
bg-dark: #121212 bg-card: #1E1E1E text-muted: #9CA3AF text-light: #F9FAFB - Resultado
- O relatório identifica rapidamente que 'text-muted on bg-card' não atinge a proporção 7:1, permitindo que o desenvolvedor ajuste o token antes de enviar o código.
Testar com amostras
designHubs relacionados
FAQ
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.