Gerador de heatmap de acessibilidade

Gera um heatmap de acessibilidade focado em contraste a partir de captura ou HTML e sugere cores de ajuste

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.

Exemplos de resultados

1 Exemplos

Gerar um heatmap a partir de uma captura com baixo contraste

Destaca areas de risco e sugere cores de ajuste.

accessibility-heatmap-example-report.html Ver arquivo
Ver parâmetros de entrada
{ "htmlInput": "", "designImage": "/public/samples/images/logo.png", "wcagLevel": "AA", "showPatchSuggestions": true }

Click to upload file or drag and drop file here

Maximum file size: 15MB Supported formats: image/png, image/jpeg, image/webp, .png, .jpg, .jpeg, .webp

Fatos principais

Categoria
Design e cor
Tipos de entrada
textarea, file, select, checkbox
Tipo de saída
file
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Gerador de Heatmap de Acessibilidade é uma ferramenta visual que analisa capturas de tela de interfaces ou códigos HTML para identificar problemas de contraste. Ele cria um mapa de calor destacando áreas que não atendem aos padrões WCAG (AA ou AAA) e sugere cores alternativas para corrigir rapidamente as falhas de acessibilidade antes do desenvolvimento ou lançamento.

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.

Exemplos

1. Auditoria de contraste em protótipo de UI

UX/UI Designer
Contexto
Um designer finalizou a tela de login de um novo aplicativo e precisa garantir que os botões e textos estejam acessíveis para usuários com baixa visão.
Problema
Identificar visualmente quais elementos da interface falham nas diretrizes de contraste WCAG AA.
Como usar
Faça o upload da captura de tela da tela de login no campo 'Imagem de design', selecione o nível 'AA' e ative 'Mostrar sugestões'.
Configuração de exemplo
Nível WCAG: AA | Mostrar sugestões: Ativado
Resultado
Um relatório em HTML é gerado com um mapa de calor vermelho sobreposto às áreas de baixo contraste, além de sugerir tons mais escuros para os textos reprovados.

2. Correção de acessibilidade em componentes HTML

Desenvolvedor Front-end
Contexto
O desenvolvedor recebeu um bloco de código HTML legado com estilos inline que apresenta problemas de legibilidade.
Problema
Encontrar os pares exatos de cores de fundo e texto que falham no padrão WCAG AAA e descobrir cores substitutas.
Como usar
Cole o código HTML no campo 'Entrada HTML', altere o nível WCAG para 'AAA' e mantenha as sugestões ativadas.
Configuração de exemplo
Nível WCAG: AAA | Mostrar sugestões: Ativado
Resultado
A ferramenta lista os elementos HTML com contraste insuficiente e fornece os códigos hexadecimais exatos para corrigir o problema e atingir a proporção de 7:1.

Testar com amostras

html, image, png
Exemplos de Processamento de Imagem Web Python
Exemplos de processamento de imagem Web Python usando PIL/Pillow incluindo leitura, salvamento, redimensionamento e conversão de formato
preferred input family image
image
Exemplos de Processamento de Imagem Windows C++
Exemplos de processamento de imagem Windows C++ incluindo ler/salvar imagens, redimensionamento e conversão de formato usando Windows Imaging Component
preferred input family image
image
Exemplos de Processamento de Imagem Web Rust
Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato
preferred input family image
image
Processamento de Imagem macOS Objective-C - Exemplos
Exemplos de processamento de imagem macOS Objective-C incluindo leitura/escrita de imagem, redimensionamento de imagem e conversão de formato
preferred input family image
image

Hubs relacionados

Ferramentas de Html para Convert
Explore 13 ferramentas de html para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image para Convert
Explore 100 ferramentas de image para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image
Explore 40 ferramentas de image para fluxos de utility e encontre utilitários próximos com rapidez.
Ferramentas de Json para Convert
Explore 100 ferramentas de json para fluxos de convert e encontre utilitários próximos com rapidez.

FAQ

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.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/accessibility-heatmap-generator

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
htmlInput textarea Não -
designImage file (Upload necessário) Não -
wcagLevel select Não -
showPatchSuggestions checkbox Não -

Os parâmetros de tipo arquivo precisam ser carregados primeiro via POST /upload/accessibility-heatmap-generator para obter filePath, depois filePath deve ser passado ao campo de arquivo correspondente.

Formato de resposta

{
  "filePath": "/public/processing/randomid.ext",
  "fileName": "output.ext",
  "contentType": "application/octet-stream",
  "size": 1024,
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Arquivo: Arquivo

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-heatmap-generator": {
      "name": "accessibility-heatmap-generator",
      "description": "Gera um heatmap de acessibilidade focado em contraste a partir de captura ou HTML e sugere cores de ajuste",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-heatmap-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Suporta links de arquivos URL ou codificação Base64 para parâmetros de arquivo.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]