El Color juega un papel integral en el diseño de interfaz de usuario. Cuando se hace bien, mejora la experiencia del usuario, influye en las decisiones de compra y refleja la voz de la marca.

entonces, ¿cómo diseñar interfaces efectivas, accesibles y estéticamente agradables para los usuarios daltónicos?

mientras que la ciencia detrás del daltonismo es bastante compleja, la esencia de esto es que las personas daltónicas tienen dificultad para ver el color claramente o diferenciar entre algunos colores., Con esto en mente, en este artículo, compartiremos algunos consejos sobre cómo puedes mejorar la accesibilidad de tu sitio y la experiencia que ofrece a las personas daltónicas.

daltonismo en un mundo Digital

según los estudios, aproximadamente 1 de cada 12 hombres (y 1 de cada 200 mujeres) son daltónicos. Aunque las personas daltónicas pueden ver las cosas tan claramente como todos los demás, no son capaces de discernir completamente la luz roja, verde o azul. Hay diferentes tipos de daltonismo; deuteranopía y protanopía daltonismo son los más comunes.,

Las personas con daltonismo rojo-verde (deuteranopía) tienen dificultad para distinguir entre rojo y verde. Del mismo modo, para las personas con daltonismo rojo (protanopía), todos los colores rojos se ven opacos.

lo que esto significa desde el punto de vista del diseño es que confiar solo en el color para la legibilidad y la asequibilidad haría que su sitio web sea difícil de usar para alguien que es daltónico.

puede usar el simulador de daltonismo de Coblis para ver cómo se ve su sitio para los usuarios daltónicos.,

7 formas en que puede mejorar la accesibilidad del Color para los usuarios daltónicos

Los elementos y técnicas de diseño que mejoran la accesibilidad del color para los usuarios daltónicos generalmente se consideran buenas prácticas de diseño. Si bien puede pensar que el atractivo estético de su sitio web podría sufrir si diseña para la accesibilidad, ciertamente no es el caso.

Aquí, echaremos un vistazo a algunas de las formas en que puede diseñar una interfaz de usuario más accesible teniendo en cuenta a los usuarios daltónicos.

#1: Usar patrones y texturas

las diferencias de Color son increíblemente importantes con la visualización de datos, p. ej.,, gráficos y gráficos circulares. Elegir colores que tengan una relación de contraste baja puede hacer que su gráfico sea difícil de interpretar para los usuarios daltónicos.

esto es lo que debe hacer:

  • Use patrones y texturas para que sea fácil para los usuarios diferenciar diferentes segmentos.
  • agregue etiquetas de texto a los segmentos para que sean aún más fáciles de entender.

echemos un vistazo a cómo una persona daltónica con tritanopia podría ver un gráfico de barras azul-verde versus cómo vería el mismo gráfico con patrones y texturas.,

así se vería si etiquetara cada segmento en lugar de usar patrones:

#2: Utilice colores y símbolos

no debe confiar únicamente en el color para comunicar errores o transmitir información a través de su interfaz de usuario.

echemos un vistazo al formulario de registro de Facebook, por ejemplo., Si el formulario dependía solo del color para que los usuarios supieran que habían cometido un error en un campo en particular, podría verse algo como esto para un usuario de red-blind (protanopia):

Aquí hay un vistazo al formulario de registro de Facebook con símbolos y mensajes de error adjuntos:

Usando iconos y símbolos en formularios para que el usuario sepa que hayan cometido un error mejora la accesibilidad y les ayuda a corregir su error más rápido.

#3: Usar etiquetas de texto

agregar etiquetas de texto a los filtros de color y muestras mejora la accesibilidad para los usuarios daltónicos., Dependiendo del tipo de daltonismo, los usuarios pueden encontrar difícil diferenciar entre diferentes colores (o tonos) sin algún tipo de texto descriptivo.

por ejemplo, sin la etiqueta de texto descriptivo en Amazon, los usuarios daltónicos no podrían distinguir una camisa roja de una naranja o verde.

agregar etiquetas de texto a los filtros de color también mejora la accesibilidad para las personas con visión normal. Por ejemplo, el blanco, el blanquecino y el gris claro a menudo son difíciles de diferenciar entre los monitores.,

#4: subrayar enlaces

muchas veces usamos el color de la fuente o el peso de la fuente para denotar enlaces. Si bien puede ser posible para alguien con deuteranomalia, protanopía o tritanopía distinguir el texto ancla del texto normal, ciertamente no es ideal debido a la baja relación de contraste.

alguien con monocromía no sería capaz de diferenciar entre texto y texto de anclaje en absoluto y tendría que pasar el cursor sobre el texto para ver si su cursor cambia a un puntero.

por esta razón, es una buena idea agregar un subrayado a los enlaces de texto., Esto hace que sea fácil distinguir inmediatamente el texto normal y el texto de anclaje. Este es un ejemplo del Sitio Web de Engadget:

#5: combinaciones de colores para evitar

ciertas combinaciones de colores no son ideales para usuarios daltónicos, ya sea porque tienen ratios de contraste bajos o porque son difíciles de diferenciar.,

Aquí hay una lista de combinaciones de colores que debe evitar usar en sus diseños de interfaz siempre que sea posible:

  • Verde-Rojo
  • verde-azul
  • Verde-Marrón
  • verde-negro
  • Verde-Gris
  • azul-gris
  • verde claro-Amarillo
  • azul-púrpura

las combinaciones de colores rojo y azul-púrpura se verían como para un usuario con protanopia:

#6: Hacer que los botones primarios se destaquen

muchas veces, los diseñadores confían en el color para hacer que los botones primarios se destaquen., El problema con esto es que el color que usa puede ser difícil de percibir para los usuarios daltónicos.

esto es lo que debe hacer en su lugar:

  • Aumentar el tamaño de su botón principal.
  • Pruebe diferentes combinaciones de colocación.
  • Aumentar el contraste entre los botones primarios y secundarios.
  • Use bordes, iconos o peso de fuente para diferenciar los botones primarios y secundarios.

por ejemplo, la Reforma utiliza tamaño y color para enfatizar el botón principal.,

y Firebox presenta su botón principal en la esquina inferior derecha y el botón secundario en la esquina superior izquierda.

#7: marcar campos de formulario obligatorios

Los usuarios daltónicos pueden tener dificultades para diferenciar entre campos obligatorios y opcionales si utiliza solo el color para indicar los campos obligatorios en los formularios.

en su lugar, puede:

  • marcar los campos obligatorios con un asterisco (*).
  • campos de Etiqueta con la palabra obligatorio u Opcional.
  • eliminar campos opcionales de los formularios.,

conclusión

diseñar la interfaz de usuario para usuarios daltónicos también le ayudará a mejorar la accesibilidad de su sitio para usuarios con visión normal. Aunque no hay una solución única para Todos cuando se trata de accesibilidad web, aquí hay algunos consejos que debe tener en cuenta:

  • Use patrones y texturas para mostrar el contraste en gráficos y tablas.
  • utilice colores y símbolos para transmitir mensajes de error.
  • Añadir etiquetas de texto a los filtros de color y muestras.
  • subrayar enlaces para diferenciar entre texto normal y texto de anclaje.,
  • evite usar combinaciones de colores pobres como Verde-Rojo y azul-púrpura.
  • utilice el tamaño, la ubicación o los pesos de fuente para que los botones principales destaquen.
  • marque los campos obligatorios del formulario con Un Símbolo (como un asterisco) o etiquételos.