Colores de semáforo bonitos y accesibles

author
3 minutes, 57 seconds Read

Todo el mundo los utiliza: Verde, amarillo (o naranja) y rojo. Los usamos en la visualización de datos, los usamos en los botones, coloreamos textos e iconos con ellos y los ponemos en las alertas. Suelen utilizarse en momentos cruciales, cuando anunciamos un éxito o damos una mala noticia. También abusamos de ellas, utilizándolas para llamar la atención donde no son relevantes. Lo que no hacemos, con demasiada frecuencia, es hacerlos accesibles.

Una minoría significativa de personas son daltónicas, y la mayoría de ellas tienen daltonismo rojo-verde. Desde 2011 he tenido que resolver la accesibilidad del color en interacciones importantes, como las alertas de las constantes vitales de los pacientes, la calidad de la atención al paciente, el estado del servidor en la nube o la analítica de las ventas ejecutivas. Aquí hay algunos consejos de accesibilidad que he recogido en el camino, así como mi plantilla personal para una paleta de colores de tráfico usable y accesible.

Puedes diseñar una paleta hermosa y amigable con los daltónicos, pero nunca está de más reforzar el mensaje. En lugar de cambiar el texto por el rojo o el verde, ponga un icono rojo o verde de forma diferente junto al texto. De este modo, aunque no tengas control sobre la paleta de colores, o el gráfico se haya impreso en blanco y negro, o tu usuario sólo vea en grises, habrás dejado claro tu punto de vista.

Un ejemplo: Excel. Excel ofrece iconos en colores de semáforo para ayudar a contar su historia de datos. ¡Asegúrese de utilizar iconos de formas diferentes, así como de colores diferentes! He aquí por qué:

Excel de escritorio, Office 2013. Presta atención a los círculos rojos y verdes: ¿podrías distinguirlos fácilmente? Microsoft resolvió este problema en versiones posteriores.

La deuteranopía y la protanopía son dos tipos comunes de daltonismo rojo-verde. Probar sus colores contra ellos optimizará para la mayoría de sus usuarios, pero los iconos ayudan a sellar el acuerdo.

No confíe en las paletas de colores preestablecidas

Hay muchos frameworks y boilerplates extremadamente útiles en línea. Cada uno satisface muchas necesidades, pero no todos han tenido el tiempo de optimizar sus colores para el daltonismo.

Ejemplos de temas de colores preestablecidos populares que no comprobaron la accesibilidad en el uso del color. (O, «Por qué no usar el naranja»)

La pregunta más importante al mirar sus rojos, verdes, naranjas y amarillos es: «¿Reconocerán mis usuarios este color cuando lo vean por sí mismo?» No confíes en que los que crearon tu marco de trabajo hayan pensado en esto. Compruébelo usted mismo.

¿Cómo lo hace, se pregunta? Durante muchos años la única solución que encontré para hacer pruebas fue el Photoshop de Adobe, que ofrecía vistas de protanopía y deuteranopía de lo que estuviera creando. Las opciones se encuentran en Ver → Configuración de la prueba (véase la imagen de abajo).

Captura de pantalla: encontrar las vistas previas del daltonismo en Adobe Photoshop.

Ahora el Corblindor Coblis (Simulador de daltonismo) se ha convertido en mi herramienta de cabecera. Basta con hacer una rápida captura de pantalla de su trabajo, y ver cómo se ve para muchos tipos diferentes de daltonismo.

Planificar con una plantilla de color

He hecho un montón de trabajo de color de visualización de datos en los últimos años, y un patrón ha surgido que me parece útil. Lo ofrezco aquí, en aras de hacer los datos más utilizables. Recomiendo encarecidamente que se tenga en cuenta este enfoque cuando se desarrolle una paleta de colores para la marca.

Nota cómo la luz frente a la oscuridad y el calor frente al frío diferencian el rojo y el verde. Su amarillo debe ser significativamente más claro que su rojo o verde!

Aquí están las directrices clave:

  • Utilice un tono claro, medio y oscuro. El amarillo debería ser el tono claro.
  • Use un verde cálido y un rojo frío, o un verde frío y un rojo cálido. Simplemente no tengas los dos fríos o los dos cálidos.
  • No hay naranja. Debido a que es mucho más ligero, el uso de amarillo en lugar de naranja hace que sea mucho menos probable que su color de «advertencia» entre en conflicto con su verde de «éxito» para los usuarios daltónicos, o que se parezca demasiado a su «problema grave» (errores, por ejemplo) rojo.

¡Eso es todo! Gracias por leer. Adelante y diviértete contando buenas historias con tus datos.

Similar Posts

Deja una respuesta

Tu dirección de correo electrónico no será publicada.