Cómo hacer accesibles imágenes y textos

Cuando se trata de crear una imagen, folletos, libros electrónicos, miniaturas o cualquier otra cosa en Canva, todos queremos que nuestras imágenes y textos sean lo mejor posible,¿no? He reunido los enlaces más útiles que definitivamente te ayudarán a hacer que tus imágenes y textos sean lo más fáciles de usar posible. Cuando creamos productos digitales, también deberíamos pensar en las personas con trastornos de lectura y discapacidad visual. 

Qué colores combinan 

No sé sobre ti, pero yo no soy unA diseñadorA profesional y no tengo idea de qué colores combinan. Por eso utilizo estos sitios web para asegurarme de que los colores elegidos "se sientan cómodamente juntos". Utilizo una rueda de colores en Canva.

¡La teoría del color es maravillosa! Analiza la percepción y discriminación del color a partir de conocimientos sistematizados de física, fisiología y psicología.

La ciencia del color consiste en:

  • la teoría física del color;
  • teorías de la visión del color;
  • teoría de la medida y expresión cuantitativa del color.

En 1666, Newton hizo pasar la luz del sol a través de un prisma de tres lados y vio una banda espectral que constaba de una gama (siete) de diferentes colores. Los diseñadores suelen crear composiciones de color según las reglas de la llamada "rueda cromática".

Ideas de paleta de colores

Canva tiene una página web con millones de ideas de paletas de colores. Estoy segurA de que definitivamente encontrarás a los que amas. Aquí está su generador de paleta de colores. 

Colores y discapacidad visual

¿Sabías que 300 millones de personas en el mundo tienen deficiencia en la visión de los colores? Eso es aproximadamente 1 de cada 12 hombres (8%) y 1 de cada 200 mujeres (0,5%), según Color Blindness In Clinton.

La deficiencia en la visión de los colores significa que las personas tampoco pueden ver los colores o las diferencias entre ellos. Existen muchos tipos de deficiencia en la visión de los colores: 

  • acromatopsia (daltonismo total),
  • acromatopsia atípica (acromatopsia parcial con agudeza visual reducida), 
  • protanopía (las personas con protanopia no pueden percibir la luz "roja". Además, no pueden distinguir: negro con muchos tonos de rojo; marrón oscuro con verde oscuro, naranja oscuro, rojo oscuro, azul oscuro/púrpura y negro; algunos colores azules con algo de rojo colores, morados y rosas oscuros; verdes medios con algunos naranjas), 
  • deuteranopía (las personas con deuteranopía no pueden percibir la luz "verde". Estos déficits de visión son, con diferencia, la forma más común de daltonismo. Este subtipo de daltonismo rojo-verde ocurre en aproximadamente el 6% de la población masculina, principalmente en la forma leve de deuteranomalía.), 
  • protanomalía (la gente ve los colores rojos como negros. Los tonos parecen más amarillos, específicamente los que son naranja, verde y amarillo), 
  • deuteranomalía (estas personas se consideran "verdes débiles". Por ejemplo, por la noche, cuando una persona ve un automóvil de color verde oscuro, parece negro. Las personas con deuteranomalía no pueden distinguir la diferencia de color entre rojo, naranja, amarillo, y verde.),
  • tritanopía y tritanomalía (a estas personas les resulta difícil diferenciar entre azul y verde. El azul y el amarillo parecen ser blanco y gris.),

Para asegurarme de que los colores elegidos sean buenos para las personas con deficiencia en la visión de los colores, utilizo el Simulador de daltonismo..

Por ejemplo, a continuación puede ver cómo perciben #ffc0cb las personas afectadas por una deficiencia en la visión de los colores. Esto puede resultar útil si necesita asegurarse de que sus combinaciones de colores sean accesibles para los usuarios daltónicos.

Colores y trastornos de la lectura

Las personas con dislexia prefieren texto y colores de fondo que sean menos brillantes y oscuros que el lector promedio. Se enfrentan a una serie de problemas clave con el texto mal coloreado. Las principales pautas son las siguientes:

1) utiliza texto de color oscuro sobre un fondo claro (no blanco porque el blanco “puro” (FFFFFF) puede parecer demasiado deslumbrante). Estos son algunos números de color HEX de los tonos de blanco que puedes usar:

Beige – #F5F5DC

Blanco hueso – #F9F6EE

Seda de maiz – #FFF8DC

Crema – #FFFDD0

Marfil – #FFFFF0

Off White – #FAF9F6

Pergamino – #FCF5E5

Concha – #FFF5EE

Puedes encontrar más tonos aquí.

2) tenga en cuenta que los colores verde, rojo y rosa dificultan la lectura de un texto no solo para las personas que tienen dislexia sino también para las personas con daltonismo;

3) Elegimos negro y crema porque es utilizado —y recomendado— por la Asociación Británica de Dislexia para su sitio web y seleccionamos negro y amarillo por su alto contraste.

4) Además, las personas con dislexia leen más rápido cuando los colores tienen menos contraste, mientras que a las personas que no tienen dislexia les gustan las combinaciones de colores que tienen mucho contraste entre los colores.

Fuentes y trastornos de la lectura

Según estudios de investigación, las mejores fuentes para personas con dislexia son las fuentes sans serif. Por ejemplo, Arial y Comic Sans, porque las letras parecen menos apretadas (abarrotadas). Las fuentes alternativas son Verdana, Tahoma, Century Gothic, Trebuchet, Calibri y Open Sans.

Se recomienda no utilizar subrayados ni cursivas. Porque esto puede causar apiñamiento y hacer que el texto parezca estar unido. Si desea enfatizar algunas palabras, es mejor utilizar negrita.

Otro punto importante es que sólo debes usar letras mayúsculas en texto continuo cuando la gramática así lo requiera (por ejemplo, el comienzo de la oración, la primera letra de los sustantivos).

Por ejemplo, no así:

“LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. VIVAMUS VEHICULA CONSEQUAT CONVALLIS. IN HAC HABITASSE PLATEA DICTUMST. CURABITUR ELEIFEND EST NEC CONDIMENTUM VIVERRA. CURABITUR AC DOLOR MALESUADA, CONSECTETUR LIBERO IN, ULTRICIES SEM.”

debería ser así:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula consequat convallis. In hac habitasse platea dictumst. Curabitur eleifend est nec condimentum viverra. Curabitur ac dolor malesuada, consectetur libero in, ultricies sem.”

El tamaño de fuente

El tamaño de fuente debe estar entre 12 y 14 puntos, o 1-1,2 em, o 16 a 19 píxeles. Algunas personas con dislexia pueden preferir un tamaño de fuente más grande. Si hablamos de títulos, estos deberían ser un 20% más grandes que el texto normal si hablamos de ellos.

La legibilidad mejora con un mayor espacio entre letras. Lo mejor es utilizar aproximadamente el 35% del ancho habitual de la letra. Por otro lado, si las letras son demasiado grandes, puede resultar difícil de leer.

El espacio entre palabras debe ser al menos 3,5 veces mayor que el espacio entre letras.

Si deseas obtener más información sobre las fuentes y los trastornos de la lectura, te recomiendo que lea este artículo publicado por la Asociación Británica de Dislexia. 

Una cosa más, si quieres imprimir, utiliza papel mate en lugar de brillo. El grosor del papel debe ser suficiente para evitar que se vea el otro lado.

Combinaciones de fuentes

Un gran diseño depende de excelentes combinaciones de fuentes. Canva proporciona una variedad de combinaciones de fuentes excepcionales que se pueden utilizar en su diseño posterior, así como plantillas con las que se puede experimentar utilizando las combinaciones de fuentes antes mencionadas. Aquí tienes la guía definitiva de Canva sobre combinaciones de fuentes que definitivamente te ayudará. 

En Conclusión

All in all, I hope that you found this information useful and will use it for creating your digital products. To be honest, I always use tips because I do not if my current readers are with color vision deficiency or not. Furthermore, I have some useful links.

Cursos gratuitos en ingles:

Fuentes utilizadas:


Related blog posts:

10 respuestas a «Cómo hacer accesibles imágenes y textos»

  1. When I started using Canva, it was a lot to take in. I love that you explain things well and show how to mix colors right. It’s super helpful.

  2. This is a really interesting read. My brother is color blind but I did not know too much about it.

  3. Accessibility is so important when creating content. You do an amazing job of highlighting the combinations of colors as well as fonts. Thank you for the great information.

  4. This is such an amazing and informative post! I love all the examples you showed along with explaining it all so well. Accessibility is so important!

    1. Avatar de Tetyana Skrypkina
      Tetyana Skrypkina

      ¡Gracias!
      I will do my best to write more about this topic 🙌

  5. I love the fact that you are talking about accessibility and I appreciate it so much. Accessible images and e-materials makes it easy for people with vision challenges to access these things easily. Awesome read!

  6. This was very informative. Thanks for sharing!

    1. Avatar de Tetyana Skrypkina
      Tetyana Skrypkina

      Always welcome!

  7. I love that you’re chatting about accessibility… It’s such a great topic to explore and something more people need to know about. 🙂 It’s fascinating learning more about the colour blindness side of things

    1. Avatar de Tetyana Skrypkina
      Tetyana Skrypkina

      Thank you 🙂
      I’m going to write more blog posts about it because I would like to see more accessible images, e-books, websites, etc.

Deja un comentario

es_ESES
Ir al contenido
%d