Support Centre

Transmitir significado en gráficos usando más que solo color

Gino B.
Gino B.
  • Actualización

Haga que los datos de los gráficos sean más claros y accesibles con técnicas de estilo adicionales, en lugar de depender únicamente del color.

Comience: agregue un gráfico a su diseño accesible

Cree un gráfico  en un  lienzo de diseño accesible  .

Seleccione o haga clic en  "Gráficos  " en la barra lateral izquierda para agregar un gráfico o una tabla al lienzo de diseño.

Un primer plano de la barra lateral izquierda, abierto al menú Gráficos (el último ícono en la barra lateral).  Bajo el encabezado Gráficos, se encuentran disponibles gráficos de tipo tabla, circular, de columnas y de barras y de líneas y áreas para agregar al lienzo de diseño.

Use etiquetas de texto además de una leyenda

Las leyendas y las etiquetas de texto  hacen que los datos de un gráfico  sean más claros para los lectores  al hacer que los datos sean  más visibles  y fáciles de identificar.

Seleccione o haga clic en el gráfico para que aparezca el menú  Editar gráfico  en la barra de herramientas superior.

Seleccione o haga clic en  Editar gráfico  para abrir las opciones de configuración del gráfico, incluidos Datos y Configuración, en el panel superpuesto derecho.

Seleccione o haga clic en la pestaña "  Configuración  ". Alterne la  Leyenda  para asegurarse de que se muestre en el gráfico.

Un usuario selecciona un gráfico en un diseño en el Editor de Venngage.  El usuario hace clic en Editar gráfico en la barra de herramientas superior y luego hace clic en la pestaña Configuración.  Bajo el encabezado 'Leyenda', el usuario hace clic en el interruptor.  En el lienzo de diseño, la leyenda aparece debajo del gráfico de barras.

Utilice suficiente contraste de color

Asegúrate de que la  relación de contraste de color  de las etiquetas y otro texto visible en el gráfico cumpla con las  pautas de WCAG  identificadas por la  herramienta Relación de contraste  en el Editor de Venngage.

Seleccione o haga clic en el gráfico para que aparezca el menú  Editar gráfico  en la barra de herramientas superior.

Seleccione o haga clic en  Editar gráfico  para abrir las opciones de configuración del gráfico, incluidos Datos y Configuración, en el panel superpuesto derecho.

Seleccione o haga clic en la pestaña "  Configuración  ".

Cambia el color de diferentes elementos del gráfico:

  • Estilo de gráfico (colores de barra o línea)

  • Líneas de cuadrícula (líneas de fondo visibles detrás de las barras)

  • Eje horizontal

  • Eje vertical

  • Etiquetas

  • Color del texto de la leyenda

Seleccione o haga clic en el  cuadrado del selector de color  junto al elemento y verifique la relación de contraste en la parte inferior del menú del selector de color.

Cambie el color haciendo clic en el selector de color o escribiendo un código hexadecimal en el campo de texto hexadecimal. La  puntuación de la relación de contraste se actualizará automáticamente  cuando se cambie el color.

Un usuario selecciona un gráfico en un lienzo de diseño en el Editor de Venngage.  El usuario hace clic en 'Editar gráfico' en la barra de herramientas superior y luego hace clic en la pestaña 'Configuración'.  Bajo el título "Etiquetas", el usuario hace clic en el selector de color.  El usuario hace clic en un color más oscuro, lo que hace que las etiquetas del gráfico sean más visibles.

Usar espacios en blanco entre las columnas del gráfico

Asegúrese de que el espacio entre los gráficos de columnas y las líneas sea suficiente para leer el texto y ver las diferentes columnas, leyendas y etiquetas de datos.

Cambie el tamaño del gráfico seleccionándolo con la barra espaciadora (teclado) o haciendo clic en él (ratón) para seleccionarlo; luego use las teclas de flecha (teclado) o sostenga y arrastre (ratón para cambiar el tamaño.

Un usuario hace clic en el lado derecho de un cuadro delimitador alrededor de un gráfico seleccionado;  el usuario arrastra el cuadro de selección para expandir el gráfico y facilitar la visualización del contenido escrito en él.

Use patrones o íconos para diferenciar columnas o líneas

Los elementos adicionales,  como patrones o iconos,  pueden ayudar a que los datos de un gráfico sean más claros para los usuarios con necesidades adicionales de adaptación visual o cognitiva.  Muestre patrones para diferenciar datos  o  use íconos como etiquetas de datos  en su gráfico.

Un lado a lado de dos gráficos diferentes en un diseño creado en el Editor de Venngage actualizado;  uno es un gráfico de líneas que tiene diferentes patrones de líneas que ayudan a distinguir los datos;  el otro es un gráfico de áreas apiladas, donde los espacios entre las diferentes líneas de datos se rellenan con diferentes colores y patrones para que sean más fáciles de distinguir.

Mostrar patrones para diferenciar datos

Haga doble clic en un gráfico en su diseño o seleccione "  Editar gráfico  " en la barra de herramientas superior para  agregar patrones a los datos de su gráfico  .

Seleccione "  Configuración  ", la segunda pestaña en el panel Editar gráfico.

Aparece un gráfico circular bajo el encabezado 'Informe de presupuesto'.  El gráfico tiene cuatro sectores;  uno es azul marino, uno es azul claro, uno es de color verde azulado medio y el otro es azul grisáceo claro.  El usuario selecciona el gráfico y hace clic en 'Editar gráfico' en la barra de herramientas superior.  En el panel del lado derecho que se abre, el usuario hace clic en la pestaña 'Configuración' debajo de las herramientas Editar gráfico.

Alterne "  Mostrar patrones  " para mostrar patrones sobre las barras, sectores o líneas en su gráfico.

Aparece un gráfico circular bajo el encabezado 'Informe de presupuesto'.  El gráfico tiene cuatro sectores;  uno es azul marino, uno es violeta claro, uno es de color verde azulado medio y el otro es azul grisáceo claro.  El usuario hace clic para alternar la configuración 'Mostrar patrones' en la pestaña 'Configuración' de las herramientas Editar gráfico.  Cuando se activa 'Mostrar patrones', los cuatro sectores del gráfico aparecen en los mismos colores que se describen, con un patrón adicional, diferente según cada color (en este caso, el sector azul marino aparece con un patrón en zig-zag superpuesto él; la rebanada verde azulado con rayas diagonales; la rebanada gris con rayas diagonales orientadas en la dirección opuesta y con mayor espacio; la rebanada violeta con un patrón repetitivo de cubos pequeños).

Los patrones están disponibles para  todos los tipos de gráficos  y son particularmente útiles para aquellos  que tienen problemas para diferenciar el color  .

Aparece un gráfico de columnas en el fondo blanco de un lienzo de diseño.  El gráfico tiene seis columnas: tres son del mismo azul medio, dos son del mismo tono de gris;  uno es un verde azulado medio.  El usuario hace clic para alternar la configuración 'Mostrar patrones' en la pestaña 'Configuración' de las herramientas Editar gráfico.  Cuando se activa "Mostrar patrones", las seis columnas del gráfico aparecen en los mismos colores que se describen, con un patrón adicional superpuesto.  Cada columna tiene un patrón diferente (en este caso, la primera columna azul aparece con un patrón de rombos; la segunda columna azul aparece con un patrón de vieira repetitivo; la tercera columna azul aparece con un patrón de rayas diagonales; la cuarta columna gris aparece con un patrón de cheurón grande y repetitivo; la quinta columna gris aparece con rayas verticales; la sexta,

NOTA:  Los patrones de gráficos se ven mejor cuando se exportan como PNG o PNG HD. Es posible que no se exporten como se muestra en el Editor de Venngage cuando se descargan o imprimen en PDF en el navegador Chrome (¡estamos trabajando en ello!), así que para obtener mejores resultados al exportar en PDF, recomendamos usar  Firefox  .

Utilice iconos como etiquetas de datos

Seleccione un icono  del menú en la barra lateral izquierda y colóquelo sobre una columna para representar los puntos de datos. En el siguiente GIF, un usuario agrega un ícono a cada una de las columnas en un gráfico de columnas para representar tres categorías:  películas, videojuegos y libros.

Un usuario abre el menú de íconos en la barra lateral izquierda en el Editor de Venngage.  Un gráfico de columnas es visible en el lienzo de diseño en el Editor.  El usuario agrega íconos del menú y los posiciona sobre cada columna.

Agregue  texto alternativo  a cualquier ícono  que incluya en sus gráficos, si transmiten  información crucial o adicional que no está  incluida en la  descripción del texto alternativo del gráfico  .

Un usuario agrega íconos adicionales al gráfico de columnas descrito anteriormente.  Describen uno de los íconos usando el modal Add Alt Text (cuadro) en el Editor de Venngage.

Describa los  datos en el gráfico  en el texto alternativo, y no necesita incluir los elementos visuales adicionales.

En el cuadro a continuación, "Preferencias de medios por grupo de edad", aparecen íconos adicionales que ayudan a diferenciar los datos y hacerlos más claros de un vistazo. Esto es útil para los lectores con  algunas deficiencias visuales o cognitivas  , pero los íconos  se pueden  marcar como decorativos   cuando el texto alternativo  describe los datos en el gráfico  .

Aquí hay un ejemplo de cómo escribir una  descripción de texto alternativo larga  para el gráfico a continuación:

Gráfico de columnas "Preferencias de medios por grupo de edad". Tres grupos de columnas con tres columnas en cada grupo representan cuántos niños, adolescentes y adultos identificaron una categoría de medios como su favorito, cuando se les dio a elegir entre videojuegos, películas, televisión y libros. En el grupo de la primera columna, la mayoría de los niños (28) dijeron que les gustaban más las películas y la televisión, seguidos por los videojuegos (24) y la menor cantidad de niños (12) eligieron los libros como sus favoritos. En el grupo de la segunda columna, 30 adolescentes eligieron videojuegos sobre películas y televisión (18) y libros (9). Los adultos, representados en el grupo de la columna final, tendieron a preferir los libros, con 22 identificándolos como su medio de comunicación preferido; 12 adultos identificaron las películas y la televisión como sus favoritas; y 8 adultos dijeron que les gustaban más los videojuegos.

Gráfico de columnas "Preferencias de medios por grupo de edad", que muestra los datos descritos anteriormente.  Además, aparecen iconos sobre cada una de las columnas que coinciden con la categoría de datos: un controlador de videojuegos aparece sobre las columnas que representan 'Videojuegos';  aparece un segmento de rollo de película con una flecha de reproducción sobre las columnas que representan "Películas y TV" y aparece una pila de libros sobre las columnas que representan "Libros".  Los iconos sobre cada grupo de columnas representan la categoría de edad de los encuestados: una niña pequeña con coletas rizadas sobre el grupo de la columna "Niños", un niño con frenos sobre el grupo de la columna "Adolescentes" y una mujer con anteojos y canas sobre el grupo de la columna. Grupo de columnas 'Adultos'.

Tenga en cuenta que la descripción  no incluye  los iconos decorativos, ya que no transmiten información adicional que no esté capturada en los datos del gráfico en sí. Para obtener más información sobre qué incluir u omitir,  consulte nuestro artículo sobre cómo escribir texto alternativo útil  .

 

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 0 de 0

¿Tiene más preguntas? Enviar una solicitud