Tu correo electrónico en HTML se ve perfecto en el editor. Pero Outlook rompe las columnas. Gmail ignora parte de los estilos. El modo oscuro oculta el botón. Un lector de pantalla describe el diseño como si fuera una tabla de datos. Las imágenes se bloquean y la oferta desaparece.
Es posible que tu equipo descubra estos problemas durante una prueba final apresurada. Lo que es peor, tus clientes pueden encontrarlos después de que el correo ya se haya enviado. No se puede reparar un mensaje que ya está en miles de bandejas de entrada.
Este inconveniente es muy común. El informe de accesibilidad del Email Markup Consortium de 2026 analizó 376.348 correos electrónicos en HTML y descubrió que el 99,88 % presentaba al menos un problema de accesibilidad grave o crítico. Tan solo ocho correos superaron todas las comprobaciones automatizadas.
La compatibilidad del correo electrónico dificulta aún más el control del riesgo. Gmail, Outlook, Apple Mail, las aplicaciones móviles y el modo oscuro procesan el código de forma distinta. Un mismo mensaje puede verse bien en un cliente de correo y fallar en otro.
Migma soluciona este problema desde el principio. Su inteligencia artificial crea un correo editable, mientras que su lenguaje y compilador propios convierten el diseño en un HTML seguro para correos. La función Migma Preflight revisa el resultado final antes de exportarlo o enviarlo.
¿Qué reveló el informe de accesibilidad del correo electrónico?
El Email Markup Consortium recopiló 376.404 correos entre mayo de 2025 y mayo de 2026. Cincuenta y seis no pudieron analizarse porque su código no era válido. El grupo evaluó los 376.348 restantes con la herramienta de accesibilidad de Parcel.
| Problema más grave encontrado | Correos |
|---|---|
| Crítico | 57,97 % |
| Grave | 41,91 % |
| Moderado | 0,02 % |
| Leve | 0,08 % |
| Sin problemas | 0,002 % |
El estudio también analizó 10.566 correos enviados a través de Substack, Shopify y Beehiiv, y ninguno superó todas las pruebas automáticas.
Entre los problemas de accesibilidad más frecuentes se encuentran:
- El 97,41 % no incluía la dirección del texto en el cuerpo del mensaje.
- El 95,66 % carecía de los detalles de idioma en el cuerpo del correo.
- El 83,78 % utilizaba tablas de diseño sin avisar a los lectores de pantalla de que solo cumplían una función estructural.
- El 71,23 % contenía enlaces sin un nombre claro.
- El 58,48 % presentaba un contraste de color deficiente.
- El 47,88 % incluía imágenes sin texto alternativo.
Estos son problemas básicos que siguen llegando a las bandejas de entrada porque muchas herramientas consideran la accesibilidad como un simple paso final. Para entonces, es posible que el equipo tenga que elegir entre retrasar una campaña o asumir el riesgo de enviarla.
¿Cuánto le cuesta a tu equipo un correo roto?
Un correo con errores genera trabajo en el peor momento posible.
Un especialista en marketing encuentra un enlace roto a pocos minutos del lanzamiento. Un diseñador observa cómo se descolocan los márgenes en Outlook. Un desarrollador tiene que intervenir para corregir el código de las tablas. El responsable de la campaña envía más mensajes de prueba y espera capturas de pantalla. Cada solución puede provocar un fallo nuevo en otro cliente de correo.
Los destinatarios se llevan la peor parte. Alguien puede perderse la oferta porque esta solo aparece dentro de una imagen. Una persona con baja visión tal vez no distinga un texto claro sobre fondo pálido. Quienes usan lectores de pantalla pueden escuchar enlaces vacíos o detalles confusos sobre las tablas. Un usuario de móvil puede verse obligado a desplazarse horizontalmente para alcanzar el botón.
Por esta razón, la accesibilidad y la compatibilidad deben integrarse en el propio proceso de maquetación. Una revisión de última hora no puede arreglar unos cimientos débiles.
¿Están rotos el 99,88 % de los correos?
El informe detectó problemas de accesibilidad automatizados de nivel grave o crítico en el 99,88 % de los correos analizados.
Esto no significa que todos los correos no se visualizaran en pantalla, ni tampoco demuestra que todos infringieran la ley o incumplieran por completo las pautas WCAG.
Las comprobaciones automáticas tienen limitaciones. Una herramienta puede verificar si una imagen incluye texto alternativo, pero una persona debe decidir si ese texto resulta útil. Una herramienta comprueba la configuración del idioma, el contraste y el rol de las tablas, pero se necesita criterio humano para validar el orden de lectura y el significado.
El informe demuestra que la mayoría de los sistemas de producción de correo electrónico carecen de controles básicos de accesibilidad.
Cómo hacer que un correo en HTML sea accesible
La accesibilidad en el correo electrónico garantiza que cualquier persona pueda leer, comprender y utilizar un mensaje, independientemente de sus necesidades o herramientas. Una mala accesibilidad bloquea esa experiencia.
Soluciona los problemas más comunes antes de realizar el envío:
- añade un texto alternativo útil en las imágenes importantes;
- asigna nombres claros a los enlaces y botones;
- utiliza textos legibles con un fuerte contraste de color;
- mantén una jerarquía lógica de encabezados;
- establece un orden de lectura coherente;
- redacta la información esencial como texto real y evítala dentro de imágenes;
- incluye los atributos de idioma y dirección del texto en el código HTML; y
- proporciona un mensaje útil cuando las imágenes estén bloqueadas.
Los lectores de pantalla también necesitan que las tablas de diseño se identifiquen correctamente. Añade role="presentation" o role="none" a las tablas que solo sirvan para organizar la maquetación. Define el idioma y la dirección del texto del correo. Proporciona textos alternativos útiles a las imágenes informativas y déjalos vacíos en las puramente decorativas. Utiliza textos de enlace que expliquen con claridad a dónde dirigen.
Sin estos detalles, un lector de pantalla puede describir cada fila y columna de la estructura visual, haciendo que el usuario escuche código en lugar de un mensaje claro.
¿Por qué el correo se ve roto en Outlook, Gmail o el modo oscuro?
La compatibilidad del correo electrónico significa que el mensaje funciona de manera uniforme en diferentes bandejas de entrada, dispositivos y configuraciones de pantalla. Una mala compatibilidad altera o destruye el diseño después del envío.
Los clientes de correo no comparten un único motor de renderizado. Outlook puede procesar los espacios, botones, fondos y columnas de forma muy distinta a Gmail. Apple Mail puede admitir una fuente o estilo que otra aplicación elimina. El modo oscuro puede invertir los colores y dificultar la lectura de textos, logotipos o botones.
Cómo solucionar los problemas de renderizado en Outlook
Las versiones clásicas de Outlook utilizan Microsoft Word para procesar el código HTML. Los diseños web modernos suelen fallar porque Word no interpreta el código HTML y CSS igual que un navegador. Microsoft también advierte de que el código HTML no válido y las modificaciones manuales pueden provocar errores de visualización.
Aplica estas soluciones:
- Crea la maquetación mediante tablas en lugar de flexbox o grid.
- Aplica los estilos importantes directamente en cada elemento utilizando CSS en línea.
- Define anchuras fijas en las tablas, celdas e imágenes.
- Incorpora código condicional de Outlook para aquellos diseños que lo requieran.
- Añade alternativas para botones redondeados, imágenes de fondo y fuentes personalizadas.
- Revisa que no haya etiquetas abiertas, anidamientos incorrectos o atributos no válidos.
- Prueba por separado la versión clásica de Outlook, el nuevo Outlook y la versión web.
La guía de renderizado de correo de Microsoft recomienda utilizar diseños generados, código HTML válido y realizar pruebas con código personalizado en distintos clientes de correo.
Cómo solucionar los problemas de renderizado en Gmail
Gmail es compatible con una gran variedad de propiedades CSS, selectores y consultas de medios, pero puede ignorar el código que no reconozca.
Aplica estas soluciones:
- Mantén los estilos esenciales en línea.
- Utiliza las reglas CSS indicadas en la guía oficial de compatibilidad CSS de Gmail.
- Asegúrate de que el orden del código fuente mantenga la coherencia cuando las columnas se apilen.
- Asigna a las imágenes dimensiones fijas o fluidas que se ajusten al ancho del correo.
- Utiliza URLs de imágenes alojadas mediante HTTPS.
- Realiza pruebas en Gmail para la web, Android y iPhone.
Cómo solucionar los problemas en el modo oscuro
El modo oscuro puede invertir los fondos, textos, botones y logotipos, y cada cliente de correo aplica estas modificaciones de manera diferente.
Aplica estas soluciones:
- Mantén un contraste elevado entre el texto y los colores de fondo.
- Comprueba todas las secciones importantes tanto en modo claro como en modo oscuro.
- Utiliza logotipos que sigan siendo visibles sobre fondos claros y oscuros.
- Añade metadatos de
color-schemeysupported-color-schemes. - Conserva el texto principal como HTML real en lugar de incluirlo dentro de imágenes.
- Proporciona colores de fondo y de texto alternativos seguros.
Cómo solucionar los problemas de diseño en dispositivos móviles
Los correos móviles suelen romperse cuando las tablas anchas, las imágenes fijas o las secciones de dos columnas no pueden reducir su tamaño.
Aplica estas soluciones:
- Mantén el ancho principal del correo dentro de los límites habituales de escritorio.
- Haz que las imágenes sean fluidas dentro de sus contenedores.
- Apila las columnas siguiendo un orden de lectura lógico.
- Utiliza un tamaño de texto corporal que se lea cómodamente sin necesidad de hacer zoom.
- Diseña botones fáciles de pulsar.
- Evita el desplazamiento horizontal.
- Prueba titulares largos, nombres, precios y textos traducidos.
Las pruebas de compatibilidad definitivas deben incluir:
- Gmail;
- Outlook para web y escritorio;
- Apple Mail;
- diseños de escritorio y móviles;
- modos claro y oscuro;
- imágenes bloqueadas; y
- fuentes alternativas.
Una captura de pantalla muestra el aspecto visual en un entorno concreto, pero no garantiza que todas las bandejas de entrada o lectores de pantalla procesen el correo de la misma manera. Envía una prueba real a cada cliente importante antes del lanzamiento.
¿Por qué el código HTML generado por IA puede empeorar el problema?
Las herramientas de inteligencia artificial generalistas pueden escribir código HTML, pero el código para correos electrónicos cuenta con normas mucho más estrictas que el de una página web convencional.
Es posible que una misma instrucción de IA deba resolver simultáneamente el texto, el diseño, los colores de marca, la optimización móvil, el CSS en línea, las correcciones para Outlook, el modo oscuro, los enlaces, los textos alternativos y la personalización. El resultado puede parecer correcto en un navegador, pero basarse en un código que fallará en una bandeja de entrada real.
Una generación rápida se traduce en un trabajo de reparación lento. El equipo pierde tiempo buscando errores de código, reconstruyendo secciones y volviendo a probar cada corrección.
Migma asigna a la inteligencia artificial una tarea más concreta y segura: la IA describe el correo mediante componentes estructurados, mientras que un compilador se encarga de generar el código adaptado a cada cliente de correo.
Cómo resuelve Migma los problemas de compatibilidad y de Outlook
Migma emplea un lenguaje interno para correo electrónico llamado Zinn. Este lenguaje describe las secciones, columnas, textos, imágenes, botones, espacios, estilos de marca y el comportamiento en dispositivos móviles.
El compilador de Migma transforma dicha estructura en un código HTML listo para producción. Tal como se indica en la guía de compatibilidad de clientes de correo de Migma, el resultado incluye:
- diseños basados en tablas optimizados para clientes de correo;
- estilos en línea;
- patrones responsivos con alternativas seguras;
- configuraciones para el modo oscuro;
- estructuras específicas para Outlook; y
- alternativas para botones, fondos y fuentes.
Esto proporciona a Migma un único flujo de renderizado que funciona de la misma manera, ya sea que el correo se origine a partir de una instrucción de IA, un diseño en Figma, una captura de pantalla, una importación de HTML, una campaña antigua o una edición visual.
Tú editas el mensaje y el diseño, mientras Migma se encarga de gestionar el complejo código subyacente. Así te evitas tener que aplicar correcciones manuales mediante tablas para Outlook al finalizar cada campaña.
Si ya dispones de un código HTML con errores, puedes importarlo en Migma para reconstruirlo a través de este mismo motor de renderizado. Si partes de una instrucción, un diseño de Figma, una captura de pantalla o una campaña anterior, Migma generará igualmente una salida optimizada específicamente para correo electrónico.
¿Cómo detecta Migma los problemas antes de que los vean los clientes?
Migma Email Preflight analiza el código HTML de producción antes de exportarlo o enviarlo.
La herramienta revisa:
- vistas previas en clientes de correo;
- compatibilidad con CSS;
- enlaces rotos o lentos;
- ortografía y gramática;
- calidad del idioma y del contenido;
- detalles de cancelación de suscripción y del remitente; y
- señales de spam y entregabilidad.
Cada resultado se muestra como superado, advertencia o error. Puedes utilizar la función de corrección con IA (Fix with AI) para aplicar modificaciones específicas en los puntos señalados y volver a ejecutar Preflight.
De este modo, los fallos se detectan en una fase mucho más segura. El equipo puede identificar enlaces rotos, contenidos deficientes o avisos de los clientes de correo mientras el mensaje aún está a tiempo de ser modificado.
¿Soluciona Migma todos los problemas del correo electrónico?
Migma abarca todo el flujo de trabajo de producción: creación con IA, código específico para correos, revisiones de compatibilidad, correcciones mediante IA, envíos de prueba, exportación y envío final.
Ninguna plataforma de correo electrónico puede prometer exactamente los mismos píxeles en todas las bandejas de entrada. Los clientes de correo pueden bloquear imágenes, sustituir fuentes, alterar colores, eliminar código CSS o modificar mensajes reenviados, y su comportamiento evoluciona con el tiempo.
Las herramientas automatizadas no pueden juzgar todos los aspectos de la experiencia de lectura. Por ello, una persona debe seguir revisando:
- el texto alternativo;
- el significado de los enlaces;
- el orden de lectura;
- el contraste de color;
- los modos claro y oscuro;
- los correos de prueba recibidos; y
- los lectores de pantalla compatibles con el equipo.
Migma elimina una gran parte del trabajo manual de compatibilidad y detecta los errores más comunes antes del envío, permitiendo que la revisión humana se centre en el significado y la aprobación final.
Deja de parchear código HTML dañado
Si tu flujo de trabajo actual consiste en «generar HTML, pegarlo en una herramienta de envío y cruzar los dedos para que Outlook responda bien», cada campaña conlleva el mismo nivel de riesgo.
Utiliza Migma antes de realizar tu próximo envío:
- Añade tu marca y las directrices de la campaña.
- Solicita a la IA de Migma que cree el correo electrónico.
- Revisa el texto, los enlaces, el contraste y el texto alternativo.
- Ejecuta Email Preflight.
- Soluciona las advertencias y errores con la ayuda de la IA.
- Envía correos de prueba a Gmail, Outlook y Apple Mail.
- Exporta o envía el correo aprobado.
Crea un correo electrónico con Migma.
Preguntas frecuentes
¿Por qué mi correo en HTML se ve diferente en Outlook?
Las versiones clásicas de Outlook utilizan Microsoft Word para procesar el código HTML, lo que puede provocar que elementos modernos como flexbox, CSS grid, posicionamiento, imágenes de fondo, esquinas redondeadas, fuentes, espacios y diseños web anidados fallen o se muestren incorrectamente. Se recomienda utilizar maquetación basada en tablas, estilos en línea, alternativas para Outlook y realizar pruebas reales en la aplicación.
¿Cómo puedo reparar un correo en HTML que se ve roto en Outlook?
Sustituye los diseños web por tablas, aplica estilos CSS en línea, define anchuras claras, añade código condicional y alternativas específicas para Outlook, valida el código HTML y prueba cada versión de Outlook. Migma se encarga de estos pasos de forma automática mediante su compilador de correo y el flujo de trabajo de Preflight.
¿Cómo evito que el modo oscuro altere el diseño de mi correo?
Utiliza un contraste elevado, comprueba las versiones clara y oscura, añade metadatos de esquema de color, emplea logotipos diseñados para ser visibles y mantén el contenido principal como texto HTML real. No es posible un control absoluto, ya que cada cliente de correo aplica el modo oscuro de manera diferente.
¿Cómo se realiza una prueba de un correo electrónico antes de enviarlo?
Verifica los enlaces, el código HTML, la accesibilidad, el diseño móvil, los modos claro y oscuro, y los principales clientes de correo. A continuación, envía mensajes de prueba reales a Gmail, Outlook y Apple Mail. La herramienta Migma Email Preflight reúne todas estas comprobaciones en un único flujo de trabajo.
¿Qué porcentaje de correos electrónicos presenta problemas de accesibilidad?
El Email Markup Consortium descubrió que el 99,88 % de los 376.348 correos en HTML analizados presentaba al menos un problema de accesibilidad automatizado de nivel grave o crítico. Esta cifra corresponde al conjunto de datos y pruebas del informe.
¿Quién publicó el dato del 99,88 % en accesibilidad de correos?
El Email Markup Consortium lo publicó en su Informe de Accesibilidad de 2026, elaborado en colaboración con Parcel.io y Flourish.
¿Cuál es la diferencia entre accesibilidad y compatibilidad en el correo electrónico?
La accesibilidad del correo electrónico se refiere a que los usuarios puedan comprender y utilizar el mensaje. La compatibilidad implica que el código y el diseño funcionen correctamente en diversos clientes de correo, dispositivos y configuraciones de pantalla.
¿Qué es Zinn?
Zinn es el lenguaje interno y la capa de compilación de correo electrónico de Migma. La IA de Migma crea diseños estructurados en Zinn, y su compilador los convierte en código HTML de producción apto para bandejas de entrada reales.
¿Migma es compatible con Outlook?
Migma genera código HTML basado en tablas con estilos en línea y alternativas específicas para Outlook. No obstante, se recomienda ejecutar Preflight y realizar una prueba en las versiones de Outlook que utilice tu audiencia.
¿Sustituye Migma a las pruebas de accesibilidad?
Migma automatiza numerosas comprobaciones de código, compatibilidad y pretexto. A pesar de ello, sigue siendo necesaria la revisión humana para evaluar la calidad del texto alternativo, el orden de lectura, el significado de los enlaces y el uso de lectores de pantalla.
Fuentes
- Email Markup Consortium: Accessibility Report 2026
- Email Markup Consortium: Email Client Feature Support Rankings
- WCAG 2.2
- Migma: Email Client Compatibility
- Migma: Email Preflight
- Microsoft: Fix email rendering issues
- Google: CSS support in Gmail
Preguntas frecuentes
¿Por qué los correos en HTML suelen fallar en Outlook?
Las versiones clásicas de Outlook utilizan Microsoft Word en lugar de un navegador web para procesar el código HTML, lo que provoca que técnicas web modernas como flexbox, CSS grid y ciertos estilos dejen de funcionar. Para mostrarse correctamente, los correos en Outlook necesitan diseños basados en tablas, CSS en línea, dimensiones definidas y código condicional específico.
¿Cuáles son los problemas de accesibilidad más comunes en el correo electrónico?
Según el informe de accesibilidad del Email Markup Consortium de 2026, los problemas más frecuentes detectados fueron:\n- Ausencia de dirección del texto (97,41 %) y atributos de idioma (95,66 %)\n- Tablas de diseño sin roles de presentación (83,78 %)\n- Enlaces sin nombres claros (71,23 %)\n- Contraste de color deficiente (58,48 %)\n- Imágenes sin texto alternativo (47,88 %)
¿Cómo se puede evitar que el modo oscuro rompa el diseño de un correo?
Para prevenir problemas en el modo oscuro:\n- Mantén un fuerte contraste entre el texto y los colores de fondo\n- Añade metadatos de color-scheme y supported-color-schemes\n- Conserva los mensajes importantes como texto HTML real en lugar de incrustarlos en imágenes\n- Utiliza logotipos diseñados para permanecer visibles tanto en fondos claros como oscuros\n- Proporciona colores de fondo y de texto alternativos seguros
¿Cómo soluciona Migma la compatibilidad de los correos y el renderizado en Outlook?
Migma utiliza un lenguaje interno llamado Zinn para estructurar los elementos del correo (como secciones, columnas y estilos de marca). Su compilador transforma automáticamente ese diseño en un código HTML de producción con estructuras basadas en tablas, estilos en línea, configuraciones para el modo oscuro y alternativas específicas para Outlook.
¿Qué comprueba Migma Email Preflight antes del envío?
Según la guía de Migma Email Preflight, la herramienta analiza el código HTML de producción para comprobar las vistas previas en clientes de correo, la compatibilidad con CSS, los enlaces rotos o lentos, la ortografía y gramática, la calidad del contenido, los datos del remitente y de cancelación de suscripción, así como las señales de spam antes de proceder a su exportación o envío.
