Diseñar no solo consiste en que todo se vea lo más bonito posible. También implica mejorar la accesibilidad. Aquí va nuestra forma de mejorar la accesibilidad en las aplicaciones con el uso del color.

Los colores son esenciales en el diseño. Generan sensaciones distintas al verlos y también nos sirven para influenciar a los usuarios a la hora de tomar decisiones. Pero los diseñadores no lo usamos solo para causar buena impresión en el usuario. Es muy importante también para mejorar la accesibilidad en las aplicaciones con el uso del color .

Sin embargo el centrarnos en la psicología y la teoría del color estándar muchas veces no tenemos en cuenta a una parte de la población que ve los colores de forma diferente. Las distintas patologías con las que conviven estas personas pueden hacer que tu aplicación por muy bonita o colorida que sea, resulte ilegible.

¿Por qué ser accesible?

Dibujo de mujer con camiseta naranja y falda verde agua teniendo una duda.

Aunque inicialmente pueda dar algo de miedo hacer una aplicación accesible no es una tarea tan complicada como pueda sonar. Es mas es casi más complicado hacerla inaccesible. Planificando los esquemas de usabilidad, usando la teoría del color y un buen contraste se pueden generar aplicaciones perfectamente accesibles para el usuario.

No solo es el aspecto ético de ayudar a personas con discapacidad visual a usar tus aplicaciones. Si no que realmente es frustrante y daña la experiencia de usuarios con o sin patologías. Ya que cuanto más compleja a nivel cromático y de experiencia sea tu app más complicaciones tiene para el grueso de la población.

Si con esto no te es suficiente para empezar a diseñar de forma accesible aquí van algunas razones más:

  • Cuanto más accesible sea tu app mejor repercusión tendrá en las tiendas de aplicaciones. Ya que mejorara su ASO (App Store Optimization).
  • Te da una ventaja sobre tus competidores directos, ya que si tu aplicación es accesible y la de tu competidor no te ayudará a conseguir a esos consumidores potenciales.
  • Las aplicaciones no accesibles pueden incurrir en problemas legales en algunos países por no proporcionar igualdad de oportunidades a personas con discapacidades de cualquier tipo.

La accesibilidad es algo que acompaña al ADN de Chubby Apps desde sus inicios y es algo que no podíamos dejar de lado en Cori.

App Store - Reserva

Desafíos a tener en cuenta

Captura de pantalla de la app para móvil mostrando como se ve su interfaz con las siguientes patologías: Tritanopia, Tritanomalia, Achromatopsia, Achromatomalia

Hacer una aplicación completamente accesible es tarea imposible. Y más con la gran cantidad de limitaciones que suponen los sistemas operativos. No solo porque es difícil saber como perciben los colores las personas con diferentes patologías visuales, sino que de por sí los usuarios promedio percibimos los colores de forma distinta. No solo a nivel psicológico sino también a nivel afectivo y tonal.


Hay algunas investigaciones que arrojan algo de luz sobre como ven las personas con distintas patologías, aun así a día de hoy sigue siendo un desafío para mejorar la accesibilidad en las aplicaciones, con el uso color.

mejorar la accesibilidad en las aplicaciones con el uso del color


Pero hay una serie de pasos que hacen que tu aplicación sea más accesible, así como el texto negro sobre fondo blanco está determinado por el alto contraste entre ambos colores. También se deben resaltar los elementos de navegación para que los usuarios puedan diferenciar rápido que elementos son accionables dentro del contenido principal:

Rosa y rojo, patada en el ojo

Quien me conoce sabe que me encanta la combinación de rosa y rojo. Soy una firme defensora de que son dos colores muy amigables y cercanos, pero hay veces en que no son la mejor opción.

Blanco

Gris

Antracita


¿Y por qué te preguntarás? Por la falta de contraste. ¿Patricia entonces que hacemos descartamos todos estos colores?. En realidad no sería necesario simplemente hay que tener en cuenta que el contraste sea el suficiente para que se pueda distinguir bien un tono sobre el otro. Si usas un rosa muy claro de fondo y un rojo muy oscuro en el texto generaras un muy bien contraste, pero hay que tener cuidado.

Combinaciones a evitar

Hay un tipo de dificultad visual que conocemos prácticamente todos. Y es el daltonismo. O es que acaso no has probado a ver un número realizado por círculos dentro de un círculo. El daltonismo es una dificultad para distinguir el rojo/verde y el amarillo/azul. Una patología que afecta entre el 6% y el 8% de los hombres y menos del 1% de las mujeres. ¿Y qué podemos hacer para ayudarles?

Azul

Morado

Azul

Verde


Evitar estas combinaciones ”peligrosas” de color:

  • rojo/verde
  • amarillo/azul
  • marrón/verde
  • verde/azul
  • púrpura/azul
  • gris/azul
  • verde/gris
  • negro/verde
  • amarillo/verde claro

¿La mejor opción? Complementar

Azul

Morado

Los colores complementarios (aquellos que son opuestos en la rueda de color tradicional) son los mejores para lograr un gran contraste de color. Excepto emparejar rojo y verde que son opuestos en la rueda de color

Contraste entre frío y calor

Rojo

Azul

La rueda de color también la podemos dividir entre tonos y fríos y cálidos. Algo tan sencillo como dividir la rueda por la mitad entre los colores fríos. Azules, púrpuras y verde frente a los cálidos: amarillos, naranjas y rojos.
En la mayor parte de los casos el contraste que se genera entre fríos y cálidos funciona perfectamente para crear diseños accesibles. Y ya si usas un tono más oscuro de un color frío con un tono más claro de un color cálido el contraste y la legibilidad será mayor.

Lo más sencillo: monocromo

Si te da miedo equivocarte y usar distintos tonos lo más sencillo es usar combinaciones de colores dentro de un mismo tinte de color. Así asegurarás la legibilidad a usuarios daltónicos. Y evitarás equivocarte.

Rosa

Rosa

No tengas miedo a las texturas

El uso de texturas añade un elemento extra a la composición que puede ayudar en gran manera a personas con baja visión o con ceguera de color a la detección de objetos. Así como en un texto plano nos es más fácil diferenciar negritas, líneas gruesas o títulos por el grosor de las letras.

Por supuesto el color no es lo único que tienes que tener en cuenta para que tu app sea accesible. Hay que tener en cuenta otros muchos aspectos para que tu aplicación sea accesible. Pero es un buen punto para comenzar.


Si quieres saber más sobre nosotros y lo que hacemos síguenos en Instagram, Twitter, Facebook o LinkedIn.