Acessibilidade e verificação de contraste WCAG
Prévia interativa de componentes em tempo real
Simulador de daltonismo
Recursos explicados
Verificação de contraste WCAG
Calcula taxas de contraste em tempo real para conformidade com a acessibilidade web.
Prévia interativa da interface
Prévia ao vivo do mapeamento de cores de fundo, cartões secundários e botões de chamada para ação.
Simulador de daltonismo
Simula os perfis de visão Protanopia, Deuteranopia e Tritanopia.
Matriz de equilíbrio de design 60-30-10
Distribui as cores em proporções dominante, secundária e de destaque.
Extrator de paleta de imagens
Extraia paletas de cores sólidas diretamente de fotos enviadas.
Exportação de tokens para desenvolvedores
Exporte tokens para CSS, Tailwind JS, Figma JSON, Flutter Dart e SwiftUI.
Para que você pode usar esta ferramenta?
Desenvolvimento web front-end
Exporte variáveis CSS e extensões Tailwind com conformidade de acessibilidade integrada.
Prototipagem de aplicativos móveis
Crie sistemas de design Flutter e SwiftUI com boa legibilidade.
Sistemas de identidade de marca
Extraia amostras de cores da marca de fotografias e logotipos enviados.
Auditorias de acessibilidade de UI/UX
Verifique taxas de contraste para criar interfaces inclusivas.
Informações da ferramenta
| Tipo de ferramenta | Gerador de paletas de cores sólidas e acessibilidade |
|---|---|
| Padrões de acessibilidade | Conformidade de contraste WCAG 2.1 AA e AAA |
| Simulações | Protanopia, Deuteranopia, Tritanopia |
| Formatos de exportação | CSS, Tailwind JS, Figma JSON, Flutter, SwiftUI |
| Processamento | Execução 100% no navegador, no dispositivo do usuário |
Benefícios
- Não é necessário cadastro.
- Copie códigos HEX instantaneamente com um clique.
- Teste prévias de componentes da interface em tempo real.
- Visualize a acessibilidade para pessoas com daltonismo.
Limitações
- A extração de cores de imagens usa aproximações de amostragem de pixels sRGB.
Privacidade de dados no dispositivo
Toda a renderização de imagens, os cálculos da matriz de cores e as exportações de arquivos ocorrem estritamente na sessão do navegador.
Sem armazenamento no servidor
As imagens enviadas e as paletas geradas nunca são salvas nem enviadas a servidores externos.
Dicas
- Garanta que a cor do botão de chamada para ação tenha uma taxa de contraste WCAG de pelo menos 4,5:1 em relação ao fundo.
Perguntas frequentes
O que é conformidade com a taxa de contraste WCAG?
A taxa de contraste WCAG mede a legibilidade do texto em relação ao fundo. Para que o texto comum atenda ao nível AA, é necessária uma taxa mínima de 4,5:1.
Como funciona o simulador de daltonismo?
Ele aplica transformações de cores por matriz SVG para simular, em tempo real, as condições visuais Protanopia, Deuteranopia e Tritanopia.
Posso extrair paletas de cores sólidas de imagens?
Sim. Clique no botão Extrair da foto para enviar uma imagem e obter amostras das cores sólidas dominantes.
O que é a regra de design de interface 60-30-10?
É uma regra clássica de equilíbrio visual: 60% de cor de fundo dominante, 30% de cor estrutural secundária e 10% de cor de destaque para a chamada para ação.
Esta ferramenta exporta tokens para o Figma?
Sim. Você pode exportar tokens Figma JSON que podem ser importados diretamente em sistemas de design.
O código Flutter Dart está pronto para produção móvel?
Sim. Ele gera uma classe AppColors organizada com constantes estáticas Color.
Qual é a diferença entre tons e harmonias triádicas?
Os tons alteram os níveis de luminosidade de uma única matiz; as harmonias triádicas selecionam três cores igualmente espaçadas no círculo de cores HSL.
As imagens enviadas são salvas no servidor?
Não. O processamento de imagens ocorre inteiramente na memória local do navegador.
Posso embaralhar as posições das cores geradas?
Sim. Clique no botão Embaralhar para reorganizar a posição das cores nos componentes da interface.
Este gerador de cores sólidas é totalmente grátis?
Sim. Todas as exportações de tokens de design e os recursos de acessibilidade são 100% grátis, sem cadastro.