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:

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.

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

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  :

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:

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"

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.

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:

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.