Reseña del libro "Color Accessibility Workflows" de Geri Coady. Accesibilidad y daltonismo. Accesibilidad para diseñadores gráficos.
Autor: Geri Coady
Nº páginas: 87
Idioma: inglés
Formato: digital e impreso
Fecha de publicación: 2017
Podéis consultar más reseñas de libros en: "Libros y reseñas"
Sobre el libro
"Color Accessibility Workflows" es un libro muy rápido y sencillo de leer, bien organizado y explicado. Tiene unas dimensiones reducidas (87 páginas en formato 14x21 cm) y muchas imágenes en color con ejemplos.
El público objetivo de este libro es el perfil de diseñador gráfico, de hecho, recomiendo a todos los diseñadores gráficos que lo lean. El libro también le resultará entretenido a cualquier persona, pues su temática suele suscitar mucho interés.
El color es una poderosa herramienta de diseño con infinitas posibilidades, pero la mayoría de las veces se diseña teniendo en mente solo cómo vemos nosotros.
La autora explica las barreras que puede causar el diseño a muchas personas, especialmente con daltonismo o baja visión, para que se comprenda cuál es la problemática y así exponer las soluciones. Recomienda bastantes herramientas de gran utilidad y comparte el flujo de trabajo que sigue, con un caso de uso concreto. De este modo, el objetivo es asegurar que el diseño resultante no suponga una barrera para nadie.
En resumen, esta guía, sencilla pero muy útil, enseña a hacer elecciones de color accesibles y a que los diseñadores empaticen descubriendo cómo ven otras personas en el mundo.
Como consecuencia de todo ello, también nos ofrece argumentos para que, en los debates sobre distintas versiones de diseño, podamos argumentar cuál es el diseño más adecuado desde un punto de vista de accesibilidad y por qué.
Capítulo 1: Daltonismo
La autora explica en este capítulo cómo funciona el ojo humano, qué es realmente el daltonismo y los diferentes tipos de daltonismo que existen.
Os hago un resumen, pero podéis encontrar toda la terminología en mi Glosario de accesibilidad, que ya tiene más de 600 entradas.
La discromatopsia es la dificultad para distinguir los colores, que puede ser genética, en cuyo caso se denomina daltonismo o ceguera al color. El daltonismo afecta al 8% de los hombres y al 0.5% de las mujeres.
El ojo tiene tres tipos de conos (L, M, S) cada uno sensible a una longitud de onda: larga (rojo), media (verde) y corta (azul). Los problemas en estos fotorreceptores provocan alteraciones en la percepción del color.
La alteración congénita más habitual es la protanopia/protanomalía (nula sensibilidad al rojo/falta de sensibilidad al rojo) y la deuteranopia/deuteranomalía (nula sensibilidad al verde/falta de sensibilidad al verde).
Por tanto, la dificultad habitual es para distinguir el rojo y el verde.
La tritanopia/tritanomalía (nula sensibilidad al azul/falta de sensibilidad al azul) no es hereditaria, y es más probable adquirirla con la edad, traumatismos craneales o incluso como consecuencia del alcoholismo. Por estas razones, la incidencia de la tritanopia/tritanomalía no está asociada al sexo (afecta por igual a hombres y mujeres), y es menor del 0.01% de la población. La tritanopia/tritanomalía puede ser revertida si la causa es tratada.
La acromatopsia, es decir, ver solo en blanco, negro y grises, es muy poco frecuente, y va acompañada de una importante pérdida de agudeza visual y alta sensibilidad a la luz.
Trata otros temas curiosos como la tetracromacia, una mutación genética en el cromosoma X que hace que sus portadoras (pues solo afecta a las mujeres) presenten en la retina un juego extra de conos que permite detectar una mayor variedad de colores. Afectaría a un 18% de las mujeres, pero solo un porcentaje muy reducido de estas mujeres tendría una tetracromía fuerte. Hay un test que se puede encontrar por Internet, pero no es efectivo hacerlo en monitores.
Otro tema curioso es que hay países en los que se discrimina a las personas daltónicas. Por ejemplo, está mal visto en Japón desde que, a principios de los años 20, el compromiso entre el príncipe heredero Hirohito de Japón y Nagako Kuni casi fracasó porque el daltonismo era hereditario en la familia de la novia. De hecho, en Japón se discriminaba por esta razón en el acceso a las universidades en los años 80 y aún hoy persiste esta discriminación en alguna universidad.
Un diseñador debería tener la responsabilidad de saber sobre el daltonismo y hacer cambios simples en sus flujos de trabajo para mitigar las frustraciones diarias que sufre, por esta razón, una parte significativa de la población.
Estamos hablando de un porcentaje alto de usuarios, y eso afecta al negocio, además de ser un requisito legal en muchos portales web, argumentos que suelen convencer cuando el de la responsabilidad social fracasa.
Por cierto, si a alguien le interesa el tema del color y la luz, y es un lector de ciencia ficción, os recomiendo la saga del Prisma Negro de Brent Weeks.
Capítulo 2. Elegir el color apropiado
La psicología del color no está dentro del alcance de este libro, si os interesa este tema os recomienda la reseña de un libro magnífico: "Psicología del color" de Eva Heller.
En este capítulo se habla más bien de escoger una paleta accesible.
Comienza explicando las propiedades del color (matiz, saturación y la luminosidad); así como el contraste y su importancia para la legibilidad de los elementos de la pagina, especialmente para el texto. Repasa diferentes técnicas para conseguir que los colores del texto y el fondo contrasten.
El diseño universal de colores, o Color Universal Design (CUD), intenta garantizar que la información gráfica se exprese de manera adecuada para las personas con trastornos en la percepción cromática, entre otros, el daltonismo. En varios países ya existen pautas según las cuales los gráficos de los espacios públicos deben cumplir con estos criterios. Por ejemplo, en la señalítica de un hospital puede ser literalmente cuestión de vida o muerte que interpretes correctamente los carteles.
Hay diversos estudios que buscan paletas de colores amigables para las personas daltónicas. La autora destaca los siguientes:
- Masataka Okabe y Kei Ito proponen una paleta amigable para personas daltónicas, ideal para usar en gráficas, infografías...
- Brian Suda propone una paleta amigable para personas daltónicas y para imprimir en blanco y negro, incluso incluye la descarga para Photoshop.
- Color Brewer es una herramienta que ofrece esquemas de colores para cartografía. Los colores de estos esquemas se diferencian correctamente, por ejemplo, al imprimirse en blanco o negro, o al ser visualizados por personas daltónicas.
La autora recomienda integrar el uso de un simulador de daltonismo en el flujo de trabajo para ponerse en el lugar de las personas daltónicas, aunque estas herramientas no reflejen exactamente cómo ven todas las personas daltónicas o, aunque haya diferencias entre diferentes validadores.
Ella recomienda Color Orange o la propia opción que tiene Photoshop desde la versión CS4 (en: Vista > Ajuste de prueba > Daltonismo).
Todas estas herramientas y validadores, y muchos más, los podéis encontrar en la recopilación de Mis validadores
Capítulo 3. Conformidad y testing
Explica la ratio mínima de contraste de color que exigen las WCAG, que depende del tamaño de la letra y del nivel que se quiere alcanzar (A, AA)
Los criterios de las WCAG relativos al contraste se han definido pensando en las personas con baja visión y con problemas de percepción del color, pero también nos benefician a todos en diferentes contextos, por ejemplo, al acceder con el móvil en condiciones de mala luminosidad o con reflejos.
Trata el tema del contraste de los textos que están sobre imágenes o sobre gradientes, que es una duda muy habitual. Por ejemplo, si un texto está sobre una imagen, cuando la página se cargue sin CSS, con CSS personales o sin imágenes, los textos deben seguir teniendo contraste sobre el fondo. Los validadores detectan estos problemas y, a veces, se puede pensar que es un falso negativo porque visualmente el texto sí parece tener contraste con el fondo de la imagen. Por tanto, a veces el problema de contraste no se aprecia hasta que no se deshabilitan las CSS o las imágenes.
También propone diferentes herramientas para validar el contraste de color y para buscar combinaciones de colores alternativas que sí contrasten. Entre las herramientas que propone, mis favoritas son: Colour Contrast Analyser, ColorSafe y Tanaguru Contrast Finder.
Todas estas herramientas y validadores, y muchos más, lo podéis encontrar en la recopilación de Mis validadores
Capítulo 4. Consejos y trucos
Comercio electrónico
Este es uno de los apartados que más me ha gustado del libro porque recuerda aspectos que no se tienen en cuenta muchas veces.
Si un comercio electrónico vende productos que están disponibles en varios colores, ¿una persona daltónica sabrá qué versión del producto se está mostrando? ¿podrá utilizar el filtro de color sin problemas?
Para lograrlo hay dos claves:
- Indicar el color en el nombre del producto.
- Etiquetar los colores del filtro de colores.
Caso de Subdued
En la ficha de producto del comercio electrónico de Subdued podemos encontrar prendas de vestir disponibles en varios colores.
En este caso es una camiseta rosa que también se puede comprar en negro, blanco y fucsia. Nada en la ficha de producto me indica que la camiseta es rosa.
Por otra parte, los colores del filtro de color no tienen etiqueta, por lo tanto, no puedo usar el filtro si no puedo distinguir los colores.
Caso de New Balance
En el listado de productos del comercio electrónico de New Balance, puedo tener muchas zapatillas iguales de diferente color. El nombre de la zapatilla no incluye el color, por tanto, si tengo dificultades para distinguir los colores, no podré seleccionar la que me interesa.
Por otra parte, los colores del filtro por color tienen una etiqueta. El problema es que se incluye con el atributo "title", por tanto, solo estará disponible para los usuarios que usan el ratón, pero no para los que no pueden usar el ratón y deben acceder solo con el teclado.
Caso de Warby Parker
El filtro de colores del comercio electrónico de Warby Parker es el ejemplo que pone la autora.
Este filtro por color es amigable para las personas con problemas de percepción de color porque cada color tiene asociada una etiqueta visible.
También es importante que el nombre de los colores sea sencillo y comprensible.
Texto sobre las imágenes
Un problema recurrente es el contraste de los textos sobre imágenes, por ejemplo, en los carruseles.
Propone las soluciones habituales, como incluir un color sólido bajo el texto o un fondo oscuro con poca transparencia sobre la imagen.
Mapas, gráficos o infografías
Es muy frecuente que se transmita información solo por el color en los mapas, gráficos e infografías.
Repasa las soluciones habituales, como las etiquetas asociadas a los gráficos, el uso de patrones, incluir junto a la gráfica la tabla de datos, etc.
También trata los mapas de las redes de metro, donde cada línea está representada por un color. Ejemplos de mapas de metro accesibles serían los de Londres o Tokio:
- Versiones accesibles del mapa del metro de Londres: versión en texto, versión con patrones para imprimir en blanco y negro, etc.
- Versión accesible del mapa de Tokio (PDF, 1MB): es amigable para personas daltónicas y reduce la carga cognitiva al no depender de la leyenda.
Mapa de Tokio
Mapa de Londres para imprimir en blanco y negro
En estos casos, no solo hay que tener en cuenta que los mapas sean comprensibles para las personas con problemas de percepción del color y baja visión, o que se impriman bien en blanco negro, sino también reducir la carga cognitiva para que sean más fáciles de comprender por todas las personas, especialmente si tienen una discapacidad cognitiva.
Enlaces
El problema más habitual es que los enlaces dentro del contenido no se subrayen, diferenciándose del texto que los rodea solo por el color. En este caso, la solución ideal es subrayarlos, aunque también hay otras técnicas.
Formularios
En los formularios, el error habitual relacionado con el color es indicar los campos obligatorios o erróneos solo con el color. Esta información debe transmitirse con texto, independientemente de que se apoye visualmente con un cambio de color.
Capítulo 5. Implementación
En este capítulo la autora repasa cómo es su flujo de trabajo, con un caso de uso concreto.
Los pasos son:
- Crear una paleta de color:
- Desarrollar conceptos de color.
- Definir cómo se podrán usar los colores de la paleta.
- Realizar test iniciales, indicando la ratio de contraste de las posibles combinaciones de la paleta.
- Hacer los ajustes necesarios.
- Implementar la paleta en una guía de estilos y en un prototipo.
- Trabajar primero en escala de grises.
- Verificación de las páginas implementadas, momento adecuado para usar herramientas automáticas de validación.
- El toque humano, es decir, obtener feedback de personas con diferentes habilidades y discapacidades.
Capítulo 6. Dar alternativas
En el mundo real, puede ocurrir que, por ejemplo, el cliente imponga modificaciones en los colores del portal al margen de las recomendaciones de accesibilidad.
En estos casos, siempre nos quedan otras soluciones, como ofrecer estilos alternativos o permitir a los usuarios que los editen. Incluye algunos ejemplos concretos, como la versión en alto contraste de una web, o el set de iconos amigables para personas daltónicas de una app.
En el caso de los portales web, es importante probar a visualizarlos en alto contraste, por ejemplo, para ver qué pasa con las imágenes y los iconos (artículo relacionado: Accessible SVGs in High Contrast Mode de Eric Bailey).
En el caso de los juegos, muchas veces hay problemas relativos a la información que se transmite solo por el color.
Una última curiosidad
Al comienzo del libro habla del "Dressgate", la foto de un vestido que se hizo viral porque unas personas decían verlo de un color y otras de otro. La foto del vestido no aparece en el libro, la incluyo junto con otra parecida que también se hizo viral hace un tiempo.
¿De qué color es...?
Artículos relacionados
- Reseña: "Psicología del color" de Eva Heller
- Recopilación de herramientas y validadores en: Mis validadores
* Como todos los artículos de este blog, este es un artículo NO promocionado.
Autor: Olga Carreras Montoto
Etiquetas: accesibilidad diseñadores, reseñas
