Diseño de interfaz de usuario para usuarios daltónicos

Las personas daltónicas constituyen una parte importante de la población: aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres para ser exactos. Sin embargo, los usuarios daltónicos son una audiencia que a menudo se pasa por alto en el diseño de la interfaz de usuario.

Muchos confunden el daltonismo con ver en blanco y negro, y aunque este es un tipo, existen versiones menos raras y menos extremas.

La mayoría de las personas son tricromáticas, lo que significa que perciben el color como una combinación de tres colores: verde, rojo y azul. Los diferentes tipos de daltonismo o deficiencia de la visión del color (CVD) provienen de no poder percibir uno o más de estos colores con claridad. Los tipos de CVD más comunes son el daltonismo rojo-verde, donde es difícil distinguir entre el rojo y el verde, y el daltonismo rojo, donde los colores rojos parecen apagados.

Creemos que todos deberían tener un acceso justo y equitativo a Internet, por lo que es esencial que los diseñadores de IU diseñen pensando en los usuarios daltónicos. La Ley de Estadounidenses con Discapacidades (ADA, por sus siglas en inglés) incluso requiere que ciertas organizaciones cumplan con las pautas de WCAG 2.0 Nivel AA.

Hacer que su sitio web cumpla con la ADA no es difícil, pero sí significa considerar la accesibilidad del color. Fuera de las ramificaciones legales, el diseño para usuarios daltónicos es vital para la experiencia de usuario que ofrece.

Por qué es importante diseñar para los daltónicos

La teoría del color juega un papel importante en el diseño de la interfaz de usuario porque el color tiene el poder de influir en las decisiones de compra, la respuesta emocional y la experiencia general del usuario. Piense en lo importante que es elegir los colores de marca correctos para una empresa. Ahora imagine que más del 8% de las personas no pueden leer su logotipo o sitio web debido a los colores que eligió. Eso es un montón de oportunidades perdidas.

Dado que los usuarios daltónicos no pueden diferenciar ciertos colores, los diseñadores no pueden confiar únicamente en el color para la legibilidad o el impacto emocional de un diseño. Cuando usa color, debe considerar cómo los usuarios interactúan con él y crear un diseño interactivo que atraiga a la audiencia objetivo, incluidos los miembros daltónicos. El trabajo de un diseñador es ser empático con los puntos débiles del usuario para que puedan prevenirlos y resolverlos.

Hoy en día, existen herramientas como Visolve que pueden ajustar las pantallas de las computadoras para ciertos tipos de daltonismo, pero no todas las personas daltónicas usan estas herramientas, ni siquiera todas las personas daltónicas saben que son daltónicas.

Es importante tener en cuenta que su sitio web no es el único lugar para considerar la accesibilidad del color. Incluso sus redes sociales pueden hacerse accesibles para los ciegos y los discapacitados visuales.

Terminología de color que debe conocer

Antes de entrar en las mejores prácticas de diseño de interfaz de usuario para usuarios daltónicos, es bueno revisar los fundamentos del color para aquellos que no son expertos en diseño. Hay cuatro componentes principales a considerar al elegir un esquema de color:

Matiz: Este es un sinónimo de 'color' y está determinado por la longitud de onda espectral de un color.

Saturación: también llamada croma, indica cuán intenso o puro es un color, determinado por la cantidad de gris presente. Cuanto menos gris hay, más brillante aparece un color.

Luminosidad: la luminosidad depende de la cantidad de blanco o negro que se agrega a un color, creando tintes y sombras, respectivamente.

Temperatura: Esto es lo cálido o frío que percibes que es un color. Un monitor de computadora puede afectar la temperatura percibida de un color.

Cómo diseñar para usuarios daltónicos

Diseñar para los daltónicos no significa hacer que su producto sea menos atractivo; simplemente significa seguir ciertas mejores prácticas durante el proceso de diseño. La implementación de buenos principios de diseño de UX y UI solo mejorará la usabilidad de su sitio web a largo plazo.

No defina solo con el color

Al diseñar para usuarios daltónicos, no puede confiar exclusivamente en el color para ningún mensaje.

Hacerlo es un error común en la visualización de datos, ya que los gráficos, cuadros y mapas suelen estar codificados por colores. Los formularios de reserva que muestran los espacios disponibles para citas o los asientos disponibles para conciertos a través de un código de colores también son comunes. Otros ejemplos incluyen la indicación de campos de formulario obligatorios o faltantes delineándolos en color o indicando errores con color.

Debe alejarse de transmitir información crítica en texto e imágenes en color o al menos proporcionar esa información de otras formas accesibles.

Comprender las opciones de contraste y color

Para los usuarios daltónicos, el contraste entre los colores suele ser más importante que el color en sí. Centrarse en el contraste es beneficioso para los diseñadores, ya que los diferentes tipos de daltonismo hacen que el simple hecho de evitar un color en particular sea ineficiente. Para mejorar la relación de contraste en una paleta apta para daltónicos, aclare los colores claros y oscurezca los oscuros.

Aquí hay algunas otras formas de mejorar la visibilidad de su diseño:

• Enfatice la diferencia entre el color de primer plano y el de fondo
• No elija tonos uno al lado del otro en la rueda de colores a menos que haya una gran diferencia en la luminosidad
• Evite usar colores de luminosidad similar, independientemente del tono o la saturación.
• Aumenta la saturación de los tonos en uso.

Con eso en mente, todavía hay combinaciones de colores que pueden ser más desafiantes para diferentes tipos de usuarios daltónicos. Su paleta amigable para daltónicos debería alejarse de estas combinaciones de colores cuando la relación de contraste no es significativa:

• rojo y verde
• Verde y azul
• verde y marrón
• verde y gris
• verde y negro
• azul y gris
• azul y morado
• Amarillo y verde claro

Implementar patrones y texturas

Una forma de actualizar sus diseños visuales para usuarios daltónicos sin depender solo de la paleta de colores es usar patrones y texturas. Esto funciona bien en los casos en que el color suele ayudar a distinguir la información, como en un gráfico o tabla. Agregar elementos de patrón o textura ayudará a que los elementos se destaquen.

Use símbolos y etiquete todo

El etiquetado claro es una mejor práctica para dirigir a cualquier usuario a través del viaje del cliente, incluidos aquellos que son daltónicos. Las etiquetas pueden ayudar a distinguir la información que normalmente se transmite con color. Esto se aplica a la visualización de datos, como gráficos, o para guiar a los usuarios en una página web. Pregúntese si un usuario puede encontrar su camino sin las sugerencias de color que ha proporcionado.

Desde el punto de vista del comercio electrónico, también debe etiquetar sus productos con información clara y descriptiva. No confíe en las fotos de los productos para contar toda la historia; etiquetar el color de un producto.

Reconsidere sus botones CTA

La llamada a la acción (CTA) es una parte integral del diseño interactivo. Si un usuario no puede encontrarlo o no lo entiende, no avanzará en el viaje y no alcanzará los objetivos. Debe llamar la atención sobre su CTA, y muchos diseñadores confían en el color para hacerlo.

Un buen diseño de interfaz de usuario implementa el color, pero también utiliza una o más de estas otras técnicas destacadas para los botones CTA:

• Tamaño
• Colocación
• Fuerte contraste
• Bordes ponderados
• fuentes ponderadas
• Iconos simbólicos
• Efectos de desplazamiento

Estas técnicas funcionan tanto en usuarios daltónicos como no daltónicos, y puede usarlas para otros elementos de la página sobre los que desee llamar la atención.

Subrayar esos enlaces

Si lee cualquier blog, incluido este, notará que los enlaces están resaltados para notificar a los usuarios de su presencia. La forma más común de enfatizar un enlace es con color. Para esto, use el azul porque la mayoría de las personas con una deficiencia en la visión del color pueden verlo.

Es para usuarios con acromatopsia o monocromía, aunque formas más raras de daltonismo, que el énfasis en el color no será suficiente. Para estas personas, los enlaces de colores aparecen atenuados y no se pueden distinguir de otro texto. Puede resolver esto rápidamente subrayando su texto de anclaje.

Considere el minimalismo

El minimalismo está lejos de ser nuevo. La estética ha sido tendencia durante décadas, abriéndose camino a través de la arquitectura, el arte, la decoración de interiores y, por supuesto, el diseño.

Y ahora, el minimalismo tiene un papel en la accesibilidad del color porque cuantos menos colores hay, menos posibilidades hay de confusión. También es estilísticamente atractivo y distrae menos, lo que lo convierte en una opción sólida para todos los públicos.

No es necesario que se adhiera a un diseño minimalista para ser accesible, pero es una ruta que funciona.

Utilice un simulador de daltonismo

A medida que la comunidad de diseño trabaja para lograr una experiencia de usuario accesible, han surgido muchas herramientas excelentes para ayudar. Los simuladores de daltónicos, por ejemplo, permiten a los diseñadores ver sus diseños como lo haría un usuario daltónico. Uno de esos simuladores, Oracle, está disponible para Mac, Windows y Linux. Utilice un simulador de daltónicos para probar su trabajo a lo largo del proceso de diseño y comprender cómo los usuarios interactúan con sus opciones.

Al decidir sobre su paleta de colores en las etapas iniciales, le sugerimos que utilice una herramienta de selección de colores que evalúe sus elecciones de acuerdo con las pautas de AA. Este verificador de contraste puede indicarle su relación de contraste, y este generador de color accesible sugiere combinaciones de colores que funcionan mejor.

Haga que su sitio web sea accesible

Diseñar para los daltónicos garantiza que su sitio web brinde una experiencia de usuario que toda su audiencia pueda navegar y disfrutar. Para ellos, significa una marca en la que pueden confiar; para ti, significa conversiones exitosas. Dependiendo del tamaño de su empresa, también puede significar cumplir con la ley. Independientemente, es parte de la construcción de un entorno en línea justo y equitativo.

La accesibilidad del color es solo un elemento de la construcción de un sitio web acogedor. Asegúrese de consultar nuestra guía sobre cómo hacer que su contenido sea accesible para la comunidad sorda y HOH.