Vista previa de correo en modo oscuro

Tres comportamientos, no un solo modo oscuro

En un sitio web, tú decides cómo se ve el modo oscuro. En el correo electrónico, decide por ti el programa de lectura, y cada familia de programas tiene su propia manera de hacerlo.

Así que un mismo mensaje tiene cuatro aspectos: el original claro más estos tres. La página muestra los cuatro con ancho de escritorio o de móvil.

Cómo se generan las vistas previas

La herramienta reescribe cada color que encuentra en tu HTML, ya esté en un atributo style en línea, en un bloque <style> o en un atributo antiguo como bgcolor. Cada color se convierte a matiz, saturación y luminosidad. El matiz se mantiene y la luminosidad cambia.

• Inversión parcial: un fondo con una luminancia relativa superior a 0,35 se vuelve oscuro. El texto y los bordes de la mitad más oscura de la escala se vuelven claros. Todo lo demás se deja como está.
• Inversión total: la luminosidad se refleja en todos los colores, de modo que el blanco se vuelve casi negro y el negro casi blanco.
• Sin cambios: no se reescribe nada. Si el mensaje declara color-scheme con dark, se activan sus reglas @media (prefers-color-scheme: dark). Un mensaje que no define ningún color recibe el lienzo oscuro por defecto de la aplicación.

Las reglas escritas para Outlook.com con los selectores [data-ogsc] y [data-ogsb] se aplican en la vista previa parcial. Cada vista previa se ejecuta en un marco aislado donde los scripts no pueden ejecutarse.

Qué significan los hallazgos

Contraste insuficiente

En cada versión, la herramienta empareja cada texto visible con el fondo más cercano que tiene detrás y calcula la relación de contraste. Los pares por debajo de 4,5:1 se enumeran, empezando por el peor. Por debajo de 3:1 el modo se marca como error. El texto oculto del preheader se omite.

Texto en gris medio

Un gris con poca saturación y una luminosidad entre el 45 y el 70 por ciento queda en medio de la escala. Si lo inviertes, obtienes casi el mismo gris, solo que ahora sobre el fondo opuesto. Usa #555555 o más oscuro para el texto secundario.

Logo oscuro sobre fondo transparente

La herramienta carga hasta 15 imágenes e inspecciona sus píxeles. Cuando la mayoría de los píxeles opacos son muy oscuros y los bordes son transparentes, el logo se va a fundir con un fondo oscuro. Una imagen sobre un fondo blanco opaco también se señala, porque se verá como un recuadro blanco.

Transparencia que comprobar

El servidor de la imagen no permitió que otro sitio leyera sus píxeles. Tendrás que mirar tú mismo las vistas previas oscuras.

Ajustes de modo oscuro

Indica si el mensaje declara compatibilidad con el modo oscuro y si aporta colores oscuros. Declarar compatibilidad sin aportar colores es peor que no declarar nada.

Imágenes y texto

Un mensaje con menos de 120 caracteres de texto real es sobre todo imágenes, y el texto dentro de las imágenes nunca se adapta. Se cuentan los atributos alt que faltan.

Soluciones que sobreviven en todas las aplicaciones

Empieza por las decisiones que no necesitan código. Usa pares fuertes, es decir, texto muy oscuro sobre fondos muy claros o al revés, porque lo que la inversión estropea son los tonos medios. Dale a un logo oscuro un contorno blanco de dos o tres píxeles de grosor, o colócalo sobre una forma blanca de esquinas redondeadas dentro del archivo de la imagen. Deja las palabras como texto HTML.

En un boletín, puedes añadir después tus propios estilos oscuros para las aplicaciones que los respetan:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

Una firma no tiene esa opción. El editor donde la pegas elimina <meta> y <style>, lo que te deja con colores claros y un logo que funciona sobre ambos fondos. Nuestro generador de firmas de correo puede enviar su resultado directamente a esta página.