# Generador de heatmap de accesibilidad Genera un heatmap de accesibilidad enfocado en contraste desde una captura o HTML y sugiere colores de parche > Página canónica: https://elysiatools.com/es/tools/accessibility-heatmap-generator - **Categoría:** Design - **Palabras clave:** accesibilidad, heatmap, wcag, contraste ## Descripción general 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. ## Entradas - **Entrada HTML** (textarea): Low contrast text - **Imagen de diseno** (file) - **Nivel WCAG** (select) - **Mostrar sugerencias** (checkbox) ## 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. ## 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. ## Herramientas relacionadas - [Generador de Facturas PDF](https://elysiatools.com/es/tools/pdf-invoice-generator): Genera una factura PDF con marca desde partidas estructuradas - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Generador de Mapa de Profundidad](https://elysiatools.com/es/tools/image-depth-map): Genera mapas de profundidad desde imágenes usando análisis de brillo, saturación y bordes. Crea mapas de profundidad en escala de grises donde píxeles más claros indican objetos más cercanos y píxeles más oscuros indican objetos más lejanos. - [Generador de Animación Parallax](https://elysiatools.com/es/tools/image-parallax): Genera animaciones parallax desde imágenes. Crea animaciones basadas en profundidad donde diferentes capas se mueven a diferentes velocidades, creando un efecto 3D. - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos - [Generador de Anaglifo 3D Rojo-Cian](https://elysiatools.com/es/tools/image-anaglyph): Genera imágenes anaglifo 3D rojo-cian desde fotos normales. Crea imágenes estereoscópicas 3D visibles con anteojos 3D rojo-cian. - [Generador de Mosaico de Fotos](https://elysiatools.com/es/tools/image-mosaic-generator): Cree mosaicos de fotos impresionantes combinando cientos de imágenes pequeñas para formar una imagen principal más grande. Cada mosaico se selecciona cuidadosamente para coincidir con los colores de la imagen subyacente. - [Generador de Favicon SVG](https://elysiatools.com/es/tools/svg-favicon-generator): Convierte un logo SVG o raster en un paquete favicon completo con ICO, variantes PNG, icono Apple Touch y web manifest ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Rust](https://elysiatools.com/es/samples/web-image-processing-rust): Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Auditoría de accesibilidad web antes de publicar](https://elysiatools.com/es/hubs/web-accessibility-audits): Revisa la estructura, el orden de lectura, el contraste de capturas y los riesgos de visión cromática de una página o componente, y convierte los hallazgos automáticos en un registro revisado por una persona.