Diseño accesible: crea emails que todos puedan leer y disfrutar

Diseñar un correo electrónico no solo se trata de elegir colores bonitos o imágenes llamativas. También implica asegurarse de que todos, sin importar sus capacidades visuales, cognitivas o motoras, puedan leer, entender e interactuar con el contenido. La accesibilidad visual en el diseño de emails no es una opción: es una necesidad.

¿Por qué la accesibilidad visual es importante?

La mayoría de los diseñadores tienden a pensar en su audiencia como si todos vieran el mundo de la misma forma que ellos. Pero eso está lejos de la realidad. Las discapacidades visuales, ya sean permanentes, temporales o situacionales, afectan a millones de personas. Desde el daltonismo hasta la pérdida de visión relacionada con la edad, es esencial diseñar pensando en todos los usuarios.

Principales condiciones visuales a tener en cuenta

1. Daltonismo
Afecta aproximadamente al 8% de los hombres y al 0.5% de las mujeres. Existen varios tipos, incluyendo:

• Tritanopía: confusión entre azul y verde, y entre amarillo y violeta.
• Deuteranopía: los rojos se ven más claros y se confunden con el verde.
• Protanopía: los rosas parecen azules y los rojos oscuros se confunden con el negro.
• Ceguera rojo-verde: una combinación de los dos anteriores.

El daltonismo es una de las principales razones por las que debemos preocuparnos por el uso adecuado del color, el contraste y elementos visuales como los subrayados en los enlaces al diseñar correos electrónicos accesibles.

2. Problemas de agudeza visual
Tu agudeza visual es la capacidad de tus ojos para distinguir formas y detalles de los objetos, y funciona junto con tu percepción del color y la profundidad para determinar qué tan bien ves. Las condiciones más comunes relacionadas con la agudeza visual incluyen:

Aunque muchas se corrigen con gafas y lentillas, siguen siendo un factor importante a considerar.

3. Pérdida de la visión o enfermedades oculares

Más graves, y por lo general más complicadas de tratar, son las enfermedades y trastornos que dañan los nervios o los vasos sanguíneos dentro y alrededor del ojo.

• Degeneración macular: pérdida de visión central.
• Glaucoma: afecta la visión periférica.
• Retinopatía diabética: daña los vasos sanguíneos del tejido ocular y provoca manchas oscuras o zonas ciegas en todo el campo visual.
• Cataratas: el cristalino del ojo desarrolla áreas opacas, lo que puede resultar en visión borrosa o desvanecida, halos y dificultad para ver en entornos muy brillantes o muy oscuros.

Además, factores situacionales como pantallas con brillo bajo, luz solar directa o distracciones externas pueden dificultar la lectura, incluso para personas con buena visión.

Por ejemplo, las personas disléxicas, aunque posean una gran agudeza visual, puede presentar dificultades para leer bloques de texto largos o complejos. Aunque tomemos medidas para redactar textos más cortos y fáciles de leer, es importante tener en cuenta para estos usuarios la forma en que se presentan visualmente los elementos.

Principios de diseño para correos accesibles

1. Jerarquía visual clara

Una de las mejores cosas que puedes hacer para aumentar la usabilidad de tus emails es organizar la información de forma que el lector pueda escanear fácilmente el contenido y detectar qué es lo más importante. Para ello puedes usar:

• Tamaño del contenido: los titulares deben ser más grandes que el cuerpo del texto. Piensa por ejemplo en los periódicos, ¿a que lo primero que ves son los grandes titulares? Pues con tus correos pasa lo mismo. Si el titular contiene la información más importante (aparte del CTA en sí) en un correo electrónico, hazlo más grande.
• Color: El color de los elementos también puede utilizarse para reforzar la jerarquía. Pero intenta no depender únicamente de él para transmitir la importancia de un elemento, ya que las personas perciben los colores de manera diferente, por lo que lo que es evidente para ti puede no serlo para tus suscriptores. Como normal general: los tonos oscuros y saturados llaman más la atención; los claros sirven como información secundaria.
• Ubicación y espaciado: la ubicación ye l espaciado van de la mano, permiten agrupar información relacionada y crear secciones dentro de tu correo electrónico. Esas secciones, efectivamente, refuerzan la jerarquía. El contenido más importante debe estar al principio y separado adecuadamente para facilitar la lectura.

El uso combinado del tamaño, el color, la ubicación y el espaciado te ayudará a crear una jerarquía en tus envíos y más importante aún, te permite ofrecer experiencias más accesibles para tus suscriptores.

2. Contraste y uso del color

El contraste es la diferencia entre dos elementos. En general, se refiere a la diferencia de color entre los elementos de fondo y los de primer plano en un correo electrónico. Dicho esto, el tamaño y el grosor de la fuente también influyen en el contraste.

El contraste entre texto y fondo debe ser lo suficientemente alto para garantizar la legibilidad. Las pautas que se recomiendan son:

• Nivel mínimo de contraste: debe de estar por encima de 4,5 para texto normal, y por encima de 3 para texto grande o en negrita.
• Nivel óptimo de contraste: debe de estar por encima de 7 para texto normal, y por encima de 4,5 para texto grande o en negrita.

Puedes revisar el contraste entre colores con la herramienta de Coolors.co.

Además, nunca dependas solo del color para comunicar información. Por ejemplo, los enlaces no deben diferenciarse únicamente por su color, también deben tener un subrayado u otro indicativo visual. Esto ayudará a los usuarios con daltonismo, que quizás no puedan diferenciar entre el color del texto y el del enlace.

3. Texto legible

El diseño también afecta la legibilidad:

• Longitud de línea: se refiere a qué tan larga es una línea de texto antes de que se pase a la siguiente línea. Si las líneas son demasiado cortas, obligan a los ojos del usuario a moverse muy rápido y pueden causar fatiga. También significa que tendrás más líneas y forzarás al usuario a hacer mucho scroll. Si las líneas son demasiado largas, dificulta la lectura, ya que el usuario debe gastar más tiempo en encontrar el inicio de la siguiente línea, físicamente hay más distancia que cubrir con la vista. Lo ideal es entre 50 y 85 caracteres por línea.

• Espaciado entre líneas (interlineado): muy poco espacio entre líneas hace que el texto se vea apretado y sea difícil de leer; demasiado espacio hace que las líneas parezcan desconectadas. El texto más pequeño (como el cuerpo del texto) generalmente requiere más espacio entre líneas. El texto más grande (como los titulares) puede permitir menos espacio entre líneas. Este punto no es tan sencillo como parece, ya que depende mucho de las fuentes utilizadas, la longitud del contenido y la estética que estés buscando. Experimenta hasta encontrar el interlineado ideal que funcione para tu campaña de correo electrónico.

• Alineación: la alineación es importante porque ayuda a que los ojos del lector tengan un punto de partida consistente para las nuevas líneas, especialmente en bloques largos de texto. Sin esa consistencia, el texto se vuelve difícil de leer, sobre todo teniendo en cuenta el poco tiempo que dedican la mayoría a leer los correos electrónicos. Los textos largos deben estar alineados a la izquierda (en idiomas que se lean de la izquierda a la derecha) o a la derecha (en idiomas cuya lectura sea de derecha a izquierda). Aunque el texto centrado otorga simetría al diseño, si es demasiado largo puede complicar su lectura. Como norma solo centra textos que sean más cortos de 3 líneas. Algo similar pasa con el texto justificado (que fuerza el espaciado entre palabras para que ambos lados, izquierdo y derecho, estén alineados), crea “ríos” de espacios en blanco que dificultan la lectura.

4. Layout accesibles

Con layout nos referimos al arreglo de los elementos gráficos dentro de un soporte determinado, en este caso en concreto dentro de un correo electrónico.

En los emails, esta distribución puede variar desde diseños simples de una sola columna hasta otros complejos con múltiples secciones, columnas y tamaños variados de elementos. Estos elementos pueden estar bien espaciados o amontonados juntos. Y cada variación afecta la facilidad con la que alguien puede escanear y entender la información en una campaña.

Al igual que con el texto, los diseños tienden a funcionar mejor cuando son simples y lógicos. Los diseños complejos pueden generar una sensación de sobrecarga para los usuarios. Se pueden distraer fácilmente con diferentes elementos y les puede resultar difícil enfocarse en uno solo. Los diseños complejos, al menos cuando no están diseñados con cuidado, también pueden diluir la jerarquía que hasta ahora has dedicado tanto tiempo en crear y mimar.

Por ello lo ideal es mantener un diseño de una sola columna, añadiendo secciones con más columnas de forma esporádica si es necesario. Así podrás guiar la lectura del suscriptor mucho más fácilmente, evitando crear múltiples caminos de lecturas simultáneos que puedan distraer al receptor.

Esto no significa que tooooooodooos tus correos tengan que tener una única columna, especialmente si tienes mucha información que dar, ya que si no vas a tener un diseño demasiado largo que cansará a los suscriptores. Si es el caso, puedes usar un diseño en “Z” o zigzag, que es efectivo para presentar mucha información de manera relativamente compacta, y que permite también dirigir a los usuarios a través de esa información.

Responsive

Otro aspecto clave para la accesibilidad es asegurarte de que tu plantilla sea responsive, es decir, que se adapte a otros dispositivos como móviles, ya que muchas de las aperturas se llevan a cabo a través de ellos. Aprovecho para recordarte de que todas las plantillas de Acumbamail son 100% responsive 😉

Para móvil, los correos más largos suelen estar bien (dentro de lo razonable), ya que las personas están acostumbradas a hacer scroll en dispositivos pequeños. Pero el espacio de pantalla limitado de los móviles hace que los diseños complejos se sientan aún más apretados, es normal que den problemas de legibilidad y lecturabilidad.

Por lo tanto, deberías esforzarte por usar diseños responsivos apilables, sobre todo en caso de diseños más elaborados, para que en móvil siempre se conviertan en una columna.

Conclusión

Diseñar correos accesibles no significa limitar la creatividad, sino usarla de forma más consciente. Cada elección que haces, desde el tamaño de la fuente hasta el color de un botón, impacta la experiencia del usuario. Asegúrate de que todos tus suscriptores, sin importar sus habilidades, puedan disfrutar del contenido que tanto esfuerzo te costó crear. La accesibilidad no es una tendencia. Es una responsabilidad.