Generador de heatmap de accesibilidad

Genera un heatmap de accesibilidad enfocado en contraste desde una captura o HTML y sugiere colores de parche

Sube una captura o pega HTML con colores en linea. La herramienta genera un heatmap con zonas que probablemente fallen WCAG y, en HTML, sugiere colores de ajuste.

Resultados de ejemplo

1 Ejemplos

Generar un heatmap desde una captura con poco contraste

Marca zonas riesgosas y anade colores sugeridos para corregirlas.

accessibility-heatmap-example-report.html Ver archivo
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

Datos clave

Categoría
Diseño y color
Tipos de entrada
textarea, file, select, checkbox
Tipo de salida
file
Cobertura de muestras
4
API disponible
Yes

Resumen

El Generador de heatmap de accesibilidad es una herramienta diseñada para evaluar rápidamente el contraste de tus interfaces. Al subir una captura de pantalla o pegar código HTML, la herramienta crea un mapa de calor visual que resalta las áreas que probablemente no cumplen con los estándares de contraste WCAG (AA o AAA). Además, ofrece sugerencias automáticas de colores alternativos para corregir los problemas detectados antes de pasar a la fase de desarrollo o revisión de diseño.

Cuándo usarlo

  • •Antes de entregar un diseño final a los desarrolladores para asegurar que los colores cumplen con las normativas de accesibilidad.
  • •Al auditar componentes HTML existentes para identificar rápidamente pares de texto y fondo con bajo contraste.
  • •Durante la fase de prototipado rápido para visualizar qué áreas de la interfaz necesitan ajustes de color urgentes.

Cómo funciona

  • •Sube una imagen de tu diseño (PNG, JPG, WEBP) o pega un fragmento de código HTML que contenga colores en línea.
  • •Selecciona el nivel de exigencia WCAG deseado (AA para contraste 4.5:1 o AAA para 7:1).
  • •Activa la opción de sugerencias para recibir recomendaciones de colores que mejoren la legibilidad.
  • •Descarga o visualiza el reporte generado, que incluye un mapa de calor superpuesto y las correcciones sugeridas.

Casos de uso

Auditoría visual rápida de maquetas de UI para detectar textos ilegibles sobre fondos claros u oscuros.
Revisión de componentes de correo electrónico o landing pages pegando el HTML directamente.
Generación de reportes de accesibilidad visual para justificar cambios de paleta de colores ante clientes o stakeholders.

Ejemplos

1. Auditoría de contraste en un diseño de aplicación

Diseñador UI
Contexto
Un diseñador ha creado una nueva pantalla de inicio de sesión con una paleta de colores pastel y necesita verificar si los textos de los botones son legibles.
Problema
Identificar visualmente qué botones o textos no cumplen con el estándar WCAG AA sin tener que medir cada elemento manualmente.
Cómo usarlo
Sube la captura de pantalla del diseño, selecciona el nivel WCAG 'AA' y activa 'Mostrar sugerencias'.
Configuración de ejemplo
Nivel WCAG: AA, Mostrar sugerencias: true
Resultado
Se genera un mapa de calor donde los botones con bajo contraste aparecen resaltados en rojo, junto con una lista de colores hexadecimales sugeridos para oscurecer el texto.

2. Corrección de colores en componentes HTML

Desarrollador Front-end
Contexto
El equipo de marketing entregó un bloque HTML para un boletín informativo con estilos en línea, pero el texto gris sobre fondo blanco parece difícil de leer.
Problema
Validar el contraste del código HTML y encontrar colores de reemplazo que cumplan con el nivel AAA.
Cómo usarlo
Pega el código HTML en la entrada de texto, selecciona el nivel 'AAA' y genera el reporte.
Configuración de ejemplo
Nivel WCAG: AAA, Mostrar sugerencias: true
Resultado
El reporte indica que el contraste falla y sugiere cambiar el color del texto a un gris más oscuro para cumplir con la norma AAA.

Probar con muestras

html, image, png
Ejemplos de Procesamiento de Imágenes Web Python
Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Windows C++
Ejemplos de procesamiento de imágenes Windows C++ incluyendo leer/guardar imágenes, redimensionamiento y conversión de formato usando Windows Imaging Component
preferred input family image
image
Ejemplos de Procesamiento de Imágenes Web Rust
Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato
preferred input family image
image
Procesamiento de Imágenes macOS Objective-C - Ejemplos
Ejemplos de procesamiento de imágenes macOS Objective-C incluyendo lectura/escritura de imágenes, escalado de imágenes y conversión de formato
preferred input family image
image

Hubs relacionados

Herramientas de Html para Convert
Explora 13 herramientas de html para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Image para Convert
Explora 100 herramientas de image para flujos de convert y encuentra utilidades cercanas con rapidez.
Herramientas de Image
Explora 40 herramientas de image para flujos de utility y encuentra utilidades cercanas con rapidez.
Herramientas de Json para Convert
Explora 100 herramientas de json para flujos de convert y encuentra utilidades cercanas con rapidez.

Preguntas frecuentes

¿Qué formatos de imagen soporta la herramienta?

Puedes subir capturas de pantalla en formato PNG, JPEG o WEBP con un tamaño máximo de 15 MB.

¿Cuál es la diferencia entre los niveles WCAG AA y AAA?

El nivel AA requiere una relación de contraste de al menos 4.5:1 para texto normal, mientras que el nivel AAA es más estricto y exige una relación de 7:1.

¿Cómo funciona el análisis de HTML?

La herramienta inspecciona los pares de colores de primer plano y fondo definidos en línea (inline styles) y calcula su relación de contraste.

¿Qué son las sugerencias de parche (patch suggestions)?

Son recomendaciones automáticas de colores alternativos para el texto o el fondo que te ayudarán a alcanzar el contraste mínimo requerido.

¿Puedo analizar un sitio web completo con una URL?

No, actualmente la herramienta procesa capturas de pantalla estáticas o fragmentos de código HTML directo.

Documentación de la API

Punto final de la solicitud

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

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
htmlInput textarea No -
designImage file (Subida requerida) No -
wcagLevel select No -
showPatchSuggestions checkbox No -

Los parámetros de tipo archivo necesitan ser subidos primero vía POST /upload/accessibility-heatmap-generator para obtener filePath, luego pasar filePath al campo de archivo correspondiente.

Formato de respuesta

{
  "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)"
}
Archivo: Archivo

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-heatmap-generator": {
      "name": "accessibility-heatmap-generator",
      "description": "Genera un heatmap de accesibilidad enfocado en contraste desde una captura o HTML y sugiere colores de parche",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-heatmap-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Soporte para enlaces de archivos URL o codificación Base64 para parámetros de archivo.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]