Support Centre

Transmitir significado sin depender del color

Renée Meloche
Renée Meloche
  • Actualización

El color es solo  una de las muchas herramientas visuales  que se pueden usar para transmitir información y guiar a los lectores a través de un documento.  Las Pautas de Accesibilidad al Contenido Web  definen un documento o página web accesible en parte por su uso del color.

¿Cómo afecta el color a la accesibilidad del documento?

Los lectores daltónicos  ,  con discapacidad visual o que utilizan herramientas de accesibilidad como lectores de pantalla necesitan más que  señales de color  para comprender el contenido. Los lectores de pantalla  no indican el color  , por lo que si el color es la única señal que se usa para indicar el significado, el lector de pantalla no lo detectará.

Por ejemplo, toma esta lista:

Una lista con viñetas sobre un fondo azul claro, con cinco elementos: Título del documento, Relaciones de contraste de color, Idioma del documento, Texto alternativo e Imágenes de texto.  Los elementos 'Título del documento' e 'Imágenes de texto' aparecen en una fuente roja.  El resto de los elementos aparecen en una fuente azul.

Los elementos primero y último, "Título del documento" e "Imágenes de texto" aparecen en una fuente roja, distintos de los otros tres elementos, que están en una fuente azul. Los elementos en rojo indican que faltan estos elementos, pero un lector de pantalla no describiría el color a un lector, por lo que omitiría información importante.

Ciertos colores, por ejemplo, rojo y verde, se usan comúnmente para indicar información, como "rojo" para "incorrecto" o "verde" para "bueno".

Pero depender únicamente  del color para transmitir el significado de algo excluye a los lectores que no pueden ver los colores.

¿Cómo utilizo elementos distintos del color para transmitir significado?

Utilice elementos adicionales  , accesibles para los lectores de pantalla y otros lectores con discapacidades visuales, para describir y aclarar los datos o el contenido que presenta en su diseño.

Tomemos la lista de arriba. Para hacerlo más accesible, los elementos rojos ahora aparecen con el calificador "ausente" junto a ellos, y los elementos azules aparecen junto a "confirmado", aclarando para los lectores discapacitados o herramientas de accesibilidad como lectores de pantalla lo que significan los colores.

Aparece la misma lista anterior con cinco elementos, ahora descritos por calificadores: Título del documento (ausente), Relaciones de contraste de color (confirmado), Idioma del documento (confirmado), Texto alternativo (confirmado), Imágenes de texto (ausente).

Aquí hay un ejemplo de un diseño con  baja accesibilidad  en una tabla de "hacer y no hacer" para crear contenido accesible:

Una lista de seis puntos relacionados con 'Dos' y 'Nos' accesibles.  Los tres puntos superiores aparecen sobre un fondo verde, con un icono de una marca de verificación blanca sobre un círculo verde en el lado izquierdo.  Las siguientes tres filas aparecen sobre un fondo rojo, con una 'x' blanca en un círculo rojo al lado de ellas.

Esta lista de seis puntos se presenta utilizando  colores e íconos  para aclarar cuáles de los elementos son correctos ("bueno para "hacer") y cuáles de los elementos son incorrectos ("no hacer").

Los tres primeros puntos:

  • Usar texto alternativo (alt)

  • Encabezados y títulos de secciones de etiquetas

  • Use proporciones de contraste de color para la visibilidad

aparecerá sobre un fondo verde, junto a un icono de una marca de verificación blanca en un círculo verde. Visualmente, un lector sin impedimentos podría entender que estos elementos son correctos y representan los "Dos" en la lista. Pero  es posible que un espectador daltónico no perciba el verde con claridad  , lo que hace que la imagen sea algo confusa.

Un lector de pantalla podría leer el texto  en estos puntos, pero perdería el fondo verde claro.

El texto alternativo podría describir la marca de verificación blanca en un círculo verde, pero no transmitiría claramente la posición del icono en relación con los elementos de la lista.

Del mismo modo, un lector de pantalla podría leer los siguientes tres puntos de la lista:

  • Confíe solo en el color para indicar el significado

  • Describir elementos decorativos con texto alternativo

  • Usar imágenes de texto para texto relacionado con el contenido

pero sin poder ver el fondo rojo claro, o entender dónde aparece el ícono de la 'x' blanca en un círculo rojo al lado, el significado de estos puntos "No hacer" se pierde.

Intentemos esto de nuevo, con la misma información, en un  formato más accesible  :

Un diseño de mesa, con los mismos seis puntos utilizados anteriormente, separados en dos columnas.  En la primera columna de la izquierda, bajo el encabezado 'No', aparecen los siguientes puntos: confiar solo en el color para indicar el significado, describir elementos decorativos con texto alternativo, usar imágenes de texto para texto relacionado con el contenido.  En la segunda columna, bajo el encabezado 'Do', aparecen los siguientes puntos: Use texto alternativo (alt), etiquete títulos y encabezados de sección, use proporciones de contraste de color para visibilidad.

Con los  encabezados de las columnas correctamente etiquetados  , proporciones  de contraste de color accesibles  y un tamaño de fuente más grande, la información de esta tabla se vuelve más accesible para los lectores con discapacidades visuales, así como para los lectores de pantalla. Con cada columna que indica el contexto de los puntos enumerados, un lector de pantalla puede leer cuál es "Hacer" y cuál "No hacer".

Los íconos de marca de verificación y 'x' se vuelven decorativos y  no necesitan ser descritos por texto alternativo  para que los lectores comprendan el significado de la información en la tabla. Del mismo modo, el código de colores (rojo para "no hacer" y verde para "hacer") no es crucial de entender; el encabezado en la parte superior de cada columna respectiva proporciona esa información.

¿Cómo puedo hacer que los gráficos codificados por colores sean más accesibles?

Use  textura  , diferencias en  el estilo de línea  ,  texto en gráficos (etiquetado directo)  o diferentes tonos de color para  mejorar la accesibilidad de los gráficos  para usuarios daltónicos. Los gráficos deben ser legibles en blanco y negro.

Use espacios (en blanco)  entre las columnas del gráfico y los datos  para que sea más fácil de entender.

Tome los dos gráficos a continuación, que muestran los mismos datos relacionados con las preferencias de los encuestados por diferentes tipos de frutas:

Imagen de un gráfico de barras, bajo el título "¿Por qué no se puede acceder a la codificación de colores?"  El gráfico se titula "Preferencias de frutas" y muestra cuatro grupos de barras verticales que salen del eje X.  El eje Y muestra un rango de 0 a 35.

En el primer gráfico (en la foto de arriba), el título "Preferencias de frutas" indica el tema. Las columnas están agrupadas por tipo de fruta, y cada grupo de barras está etiquetado: manzana, naranja, fresa y sandía.

Los colores de la barra representan preferencias: azul para "me gusta", naranja para "neutral" y verde para "no me gusta", aclarado por la leyenda en la parte inferior del eje X del gráfico.

El número de encuestados en cada categoría de preferencia y tipo de fruta está indicado por la altura de cada barra, con números en intervalos de 5 visibles a lo largo del eje Y.

En el segundo gráfico (que se muestra a continuación), la composición de las columnas y su agrupación por tipo de fruta (etiquetadas en el eje X), así como los incrementos de datos en el eje Y, son los mismos que en el primer gráfico.

El color de cada barra es el mismo que en el gráfico anterior, pero las barras también se diferencian por patrones únicos:

  • Patrón azul  y diamante para "me gusta"

  • Patrón de rayas naranjas  y  diagonales para "neutral"

  • Patrón verde  y  enrejado para "no me gusta"

Imagen del mismo gráfico de barras, titulado "Preferencias de frutas".  Además de los elementos descritos anteriormente, cada barra del gráfico de barras (agrupadas por tipo de fruta) también está etiquetada con la preferencia y el número de encuestados, que aparece en la parte superior de cada barra respectiva.  De izquierda a derecha: Manzanas - 25 Me gusta, 13 Neutral, 18 No me gusta.  Naranjas: 25 Me gusta, 18 Neutral, 13 No me gusta.  Fresas: 23 Me gusta, 20 Neutral, 13 No me gusta.  Sandías: 15 Me gusta, 30 Neutral, 11 No me gusta.

En el segundo gráfico, las etiquetas encima de cada barra también hacen que los datos sean más claros y fáciles de leer.

En esta comparación lado a lado de los gráficos (que se muestra a continuación), los colores se han convertido a escala de grises para simular cómo alguien con discapacidad visual podría leer los gráficos.

 

Los dos gráficos de barras descritos anteriormente, representados uno al lado del otro.  Los colores se han convertido a escala de grises para que la comparación entre las barras de colores y las barras estampadas sea más fácil de percibir.

Es más fácil distinguir entre las tres columnas de cada agrupación en el gráfico con las barras que tienen un patrón.

Lo mismo ocurre con los gráficos de líneas en la siguiente comparación en paralelo:

Dos gráficos de líneas con los mismos datos, que se muestran uno al lado del otro.  El primero está encima del encabezado 'Gráfico de líneas inaccesibles'.  El segundo aparece encima del encabezado "Gráfico de líneas accesibles".  Ambos gráficos se titulan 'Sistema operativo preferido'.  Los ejes X muestran un rango de años que comienza con 1990 y termina con 2003;  el eje Y está etiquetado como "Porcentaje de usuarios" y va de 0 a 100. Aparecen tres líneas en cada gráfico.  La primera línea, “Windows”, va desde alrededor del 10 % de los usuarios en 1990 hasta alrededor del 85 % de los usuarios en 2003. La segunda línea, Linux, comienza en 0 % alrededor de 1999 y sube a alrededor del 10 % en 2003. La tercera línea, Macintosh, comienza en 85% en 1990 y cae a cerca de 5% en 2003.

En el " Gráfico  de líneas inaccesibles   ", los colores que representan cada sistema operativo (rojo para "Windows", verde para "Linux" y azul para "Macintosh") son difíciles de distinguir visualmente, especialmente para alguien con daltonismo.

En el " Gráfico  de líneas accesibles   ", a cada línea se le asigna un patrón y un color diferentes (azul oscuro y guiones largos para "Windows", verde oscuro y sólido para "Linux", rojo y guiones pequeños para "Macintosh") para hacer ellos más fáciles de distinguir. Cada línea también está etiquetada, lo que facilita a los espectadores identificar las líneas sin tener que consultar la leyenda.

Agregue un patrón a cualquier gráfico  en su diseño accesible para que sea más fácil para los lectores diferenciar entre diferentes conjuntos de datos.

 

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 1 de 2

¿Tiene más preguntas? Enviar una solicitud