Una guía para la accesibilidad del color en el diseño del producto.

Se habla mucho sobre diseño accesible, pero ¿alguna vez has pensado en la accesibilidad del color?

Recientemente, un cliente presentó un proyecto con implementaciones complejas y muy específicas de un sistema de color accesible. Esto me abrió los ojos no solo a lo importante que es este tema, sino también a cuánto hay que aprender.

Esta historia es de Justin Reyna.

Aprendamos cómo obtener colores accesibles utilizando los principios de diseño que ya conoce.

¿Por qué es tan importante la accesibilidad?

La accesibilidad en el diseño de productos digitales es la práctica de crear experiencias para todas las personas, incluidas aquellas con discapacidades visuales, del habla, auditivas, físicas o cognitivas. Como diseñadores, desarrolladores y personal técnico general, tenemos el poder de crear una web de la que todos estamos orgullosos: una web inclusiva creada y consumible por todas las personas.

Además, no crear productos accesibles es simplemente grosero, así que no seas grosero.

La accesibilidad del color permite a las personas con discapacidad visual o deficiencia de la visión del color interactuar con experiencias digitales de la misma manera que sus contrapartes sin discapacidad visual. En 2017, la Organización Mundial de la Salud estimó que aproximadamente 217 millones de personas viven con algún tipo de discapacidad visual de moderada a grave. Esa estadística por sí sola es razón suficiente para diseñar la accesibilidad.

"No crear productos accesibles es simplemente grosero, así que no seas grosero".

Además de que la accesibilidad es una mejor práctica ética, también existen posibles implicaciones legales para no cumplir con los requisitos reglamentarios en materia de accesibilidad. En 2017, los demandantes presentaron al menos 814 demandas federales sobre sitios web presuntamente inaccesibles, incluidas una serie de acciones colectivas. Varias organizaciones han tratado de establecer estándares de accesibilidad, especialmente la Junta de Acceso de los Estados Unidos (Sección 508) y el Consorcio de la World Wide Web (W3C). Aquí hay una descripción general de estos estándares:

  • El cumplimiento de la Sección 508: 508 se refiere a la Sección 508 de la Ley de Rehabilitación de 1973. Puede leer la ordenanza detallada aquí, pero para resumir, la Sección 508 requiere que su sitio sea accesible si es una agencia federal o crea sitios en nombre de una agencia federal (como contratistas).
  • W3C: El Consorcio de la World Wide Web (W3C) es una comunidad internacional voluntaria que se estableció en 1994 y desarrolla estándares abiertos para la web. El W3C describe sus pautas para la accesibilidad web dentro de WCAG 2.1, que es esencialmente el estándar de oro para las mejores prácticas de accesibilidad web.

Asegurarse de que su producto sea accesible en color

Es mejor tener en cuenta la accesibilidad desde el principio del ciclo de vida de un producto: reduce el tiempo y el dinero que gastará para hacer que sus productos sean accesibles de forma retroactiva. La accesibilidad del color requiere un poco de trabajo inicial al seleccionar la paleta de colores de su producto, pero garantizar que sus colores sean accesibles pagará dividendos en el futuro.

Aquí hay algunos consejos rápidos para asegurarse de que está creando productos con colores accesibles.

Agrega suficiente contraste

Para cumplir con la calificación AA mínima del W3C, su relación de contraste de fondo a texto debe ser de al menos 4.5: 1. Por lo tanto, cuando diseñe elementos como botones, tarjetas o elementos de navegación, asegúrese de verificar la relación de contraste de sus combinaciones de colores.

Hay muchas herramientas para ayudarlo a probar la accesibilidad de las combinaciones de colores, pero las que he encontrado más útiles son Colorable y Colorsafe. Me gusta Colorable porque tiene controles deslizantes que le permiten ajustar el tono, la saturación y el brillo en tiempo real para ver cómo afecta la calificación de accesibilidad de una combinación de colores en particular.

No confíes únicamente en el color.

También puede garantizar la accesibilidad asegurándose de no confiar en el color para transmitir información crucial del sistema. Entonces, para cosas como estados de error, estados de éxito o advertencias del sistema, asegúrese de incorporar mensajes o iconografía que indique claramente lo que está sucediendo.

Además, cuando se muestran elementos como gráficos o cuadros, dar a los usuarios la opción de agregar texturas o patrones asegura que quienes son daltónicos puedan distinguir entre ellos sin tener que preocuparse de que el color afecte su percepción de los datos. Trello hace un gran trabajo con su Modo Colorblind-Friendly.

Contraste de estado de enfoque

Los estados de enfoque ayudan a las personas a navegar por su sitio con un teclado al darles un indicador visual alrededor de los elementos. Son útiles para personas con discapacidades visuales, personas con discapacidades motoras y personas a las que les gusta navegar con un teclado.

Todos los navegadores tienen un color de estado de enfoque predeterminado, pero si planea anularlo dentro de su producto, es crucial asegurarse de proporcionar suficiente contraste de color. Esto garantiza que aquellos con impedimentos visuales o deficiencias de color puedan navegar con estados de enfoque.

Documente y socialice el sistema de color

Por último, el aspecto más importante de crear un sistema de color accesible es darle a su equipo la capacidad de referenciarlo cuando sea necesario, para que todos tengan claro el uso adecuado. Esto no solo reduce la confusión y la rotación, sino que también garantiza que la accesibilidad sea siempre una prioridad para su equipo. En mi experiencia, llamar explícitamente la calificación de accesibilidad de una combinación de colores específica dentro de un Kit de UI o Sistema de diseño es más efectivo, especialmente cuando se socializa en todo el equipo con una herramienta (como InVision Craft o InVision DSM). Aquí hay un ejemplo de cómo documentar combinaciones de colores de fondo a texto y la calificación de accesibilidad de cada combinación.

Vamos a acceder

Estos son solo algunos consejos para hacer que su producto sea más accesible, pero tenga en cuenta que solo se relacionan con la accesibilidad del color. Para comprender las pautas de accesibilidad en detalle, le recomiendo familiarizarse con WCAG 2.1. Si bien estas pautas pueden ser un poco desalentadoras, existen toneladas de recursos para ayudarlo en el camino y, en caso de duda, no dude en comunicarse con los diseñadores en su área (o por Internet) para obtener ayuda.

¿Te ha gustado esta publicación? Lea más me gusta en Inside Design, un nuevo blog de InVision.

Publicado originalmente en invisionapp.com.