# Gerador de heatmap de acessibilidade Gera um heatmap de acessibilidade focado em contraste a partir de captura ou HTML e sugere cores de ajuste > Página canônica: https://elysiatools.com/pt/tools/accessibility-heatmap-generator - **Categoria:** Design - **Palavras-chave:** acessibilidade, heatmap, wcag, contraste ## Visão geral Envie uma captura de UI ou cole HTML com cores inline. A ferramenta gera um heatmap de regioes com risco de falhar WCAG e sugere cores de ajuste. ## Entradas - **Entrada HTML** (textarea): Low contrast text - **Imagem de design** (file) - **Nivel WCAG** (select) - **Mostrar sugestoes** (checkbox) ## Quando usar - Durante a revisão de design de interfaces para garantir que o contraste das cores atenda aos requisitos de acessibilidade. - Ao auditar componentes HTML legados para identificar e corrigir rapidamente pares de cores de fundo e texto com baixo contraste. - Antes de enviar protótipos de UI para a equipe de desenvolvimento, evitando retrabalhos relacionados a falhas nas diretrizes WCAG. ## Como funciona - Faça o upload de uma imagem de design (PNG, JPG, WEBP) ou cole um trecho de código HTML contendo cores inline. - Selecione o nível de conformidade WCAG desejado (AA para contraste de 4.5:1 ou AAA para 7:1). - Ative a opção de sugestões para receber recomendações automáticas de cores que resolvem os problemas encontrados. - A ferramenta processa a entrada e gera um relatório visual em HTML com um mapa de calor destacando as áreas de risco. ## Casos de uso - Auditoria rápida de contraste em protótipos de aplicativos móveis ou sites. - Geração de relatórios visuais de acessibilidade para justificar mudanças de paleta de cores para stakeholders. - Correção automatizada de cores em componentes de e-mail marketing baseados em HTML inline. ## Perguntas frequentes ### Quais formatos de imagem são suportados? Você pode enviar capturas de tela nos formatos PNG, JPEG e WEBP com tamanho de até 15 MB. ### Qual a diferença entre os níveis WCAG AA e AAA? O nível AA exige uma taxa de contraste de 4.5:1 para textos normais, enquanto o nível AAA é mais rigoroso, exigindo uma taxa de 7:1. ### Como a ferramenta analisa o código HTML? Ela inspeciona os pares de cores de texto e fundo definidos inline no HTML fornecido e calcula a taxa de contraste entre eles. ### O que são as sugestões de cores de ajuste? São recomendações automáticas de valores hexadecimais para o texto ou fundo que garantem a aprovação no nível WCAG selecionado. ### Posso usar a ferramenta apenas com imagens sem enviar HTML? Sim, você pode enviar apenas uma captura de tela da interface. A ferramenta fará uma amostragem das cores locais para estimar os pontos críticos de contraste. ## Ferramentas relacionadas - [Gerador de Faturas PDF](https://elysiatools.com/pt/tools/pdf-invoice-generator): Gera uma fatura PDF com marca a partir de itens estruturados - [Gerador de Data URI](https://elysiatools.com/pt/tools/data-uri-generator): Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown - [Gerador de Mapa de Profundidade](https://elysiatools.com/pt/tools/image-depth-map): Gera mapas de profundidade a partir de imagens usando análise de brilho, saturação e bordas. Cria mapas de profundidade em escala de cinza onde pixels mais claros indicam objetos mais próximos e pixels mais escuros indicam objetos mais distantes. - [Gerador de Animação Parallax](https://elysiatools.com/pt/tools/image-parallax): Gera animações parallax a partir de imagens. Cria animação baseada em profundidade onde diferentes camadas se movem em velocidades diferentes, criando um efeito 3D. - [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons - [Gerador de Anaglifo 3D Vermelho-Ciano](https://elysiatools.com/pt/tools/image-anaglyph): Gera anaglifos 3D vermelho-ciano a partir de fotos normais. Cria imagens estereoscópicas 3D visíveis com óculos 3D vermelho-ciano. - [Gerador de Mosaico de Fotos](https://elysiatools.com/pt/tools/image-mosaic-generator): Crie mosaicos de fotos impressionantes combinando centenas de pequenas imagens para formar uma imagem principal maior. Cada peça é cuidadosamente selecionada para corresponder às cores da imagem subjacente. - [Gerador de Favicon SVG](https://elysiatools.com/pt/tools/svg-favicon-generator): Transforma um logo SVG ou raster em um pacote favicon completo com ICO, variacoes PNG, Apple touch icon e web manifest ## Exemplos - [Exemplos de Processamento de Imagem Web Python](https://elysiatools.com/pt/samples/web-image-processing-python): Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Java](https://elysiatools.com/pt/samples/android-image-processing-java): Exemplos de processamento de imagem Android Java incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Android Kotlin](https://elysiatools.com/pt/samples/android-image-processing-kotlin): Exemplos de processamento de imagem Android Kotlin incluindo leitura/escrita, dimensionamento e conversão de formato - [Exemplos de Processamento de Imagem Web Rust](https://elysiatools.com/pt/samples/web-image-processing-rust): Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato ## Conteúdo relacionado - [Auditoria de acessibilidade web antes da publicação](https://elysiatools.com/pt/hubs/web-accessibility-audits): Revise a estrutura, a ordem de leitura, o contraste das capturas e os riscos de visão de cores de uma página ou componente, transformando achados automáticos em um registro revisado por uma pessoa.