¿Cómo elegir la paleta cromática de tu UI?

Hablemos de la teoría del color

Como diseñador UX/UI, debes añadir a tus responsabilidades el estudio de la teoría del color. Si te estás iniciando en tu carrera profesional y buscas información clara y concisa sobre este tema, este artículo es justo para ti.
Repasemos algunos conceptos clave que debes conocer para diseñar una interfaz de usuario funcional y estética:

Cantidad de colores

Existe una marcada tendencia con respecto a la cantidad de colores presentes en una pantalla y la interacción que el usuario tiene con ella: mientras más colores hay, menos compleja es la interacción. Mientras más compleja es la interacción, menos colores hay. 

Es por eso que solemos encontrar más cantidad y combinaciones de colores en formatos simples como una landing page, donde no tenemos muchas acciones posibles más que leer una breve cantidad de información y/o registrarnos en algún formulario. Sin embargo, en interfaces más complejas como el detalle de operaciones de una cuenta bancaria o herramientas puramente analíticas como Google Analytics, Ahrefs o el Administrador de anuncios de Facebook, solemos ver uno o dos colores análogos con variaciones de saturación, porque el nivel de interacción que tenemos con ellas es mucho mayor. ¡No necesitamos colores que nos distraigan!

La luz

Cuando hablamos de “luz” hablamos de una pequeña franja del espectro electromagnético llamada “espectro visible” que es, de toda la energía que emite el sol, la porción que logramos percibir con el ojo humano. En definitiva, la franja de colores que logramos ver. 

Círculo cromático 

No se trata solo de cuántos colores tiene nuestra interfaz, también tenemos que saber cómo combinarlos para generar armonía. Para eso, lo primero que tenemos que saber es cómo están ubicados los colores en el círculo cromático.

Armonías de color

Esta es la parte más divertida. Las armonías de color son combinaciones de colores que, según su ubicación y relación en el círculo cromático, funcionan muy bien juntas. Es decir, que son agradables para el ojo humano. Encontramos 3 combinaciones de color principales que nos sirven muy bien para crear la paleta cromática de una interfaz:

• Armonías monocromáticas: Conformada por un sólo color pero en distintas tonalidades. Por ejemplo, el rosa puede volverse más claro o más oscuro si le agregamos blanco o negro, convirtiendo el color en un rosa pastel o en un rosa viejo, incluso en un rojo. 

• Armonías análogas: Conformada por un grupo de colores que se encuentran cercanos en el círculo cromático. Por ejemplo: amarillo, naranja y rojo. También podemos jugar con las tonalidades de cada color, sumando variaciones de estos colores como el bordó o el marrón.

• Armonías complementarias:Al contrario de las otras dos, ésta se conforma por colores opuestos; es decir, que se encuentran en el otro extremo del círculo cromático y generan un choque visual. Por ejemplo, violeta y amarillo o el más conocido: naranja y turquesa. 

 

Variaciones de color 

Una buena práctica es tomar como base el color dominante de la marca o proyecto con el que estemos trabajando y generar variaciones con respecto al tono, unas con más blanco (más claras) y otras con más negro (más oscuras o profundas). 

Podemos generar estas variaciones usando imágenes del mundo real, donde encontremos a ese color de forma natural, y extraer la paleta cromática con alguna herramienta (como PixelPerfect, una APP para Android). Además, existe una extensión de Chrome súper útil llamada “Palette Creator” que genera una paleta de hasta 32 colores al hacer clic derecho sobre una imagen. 

También tenemos otras herramientas disponibles que generan paletas al indicarles colores de base:

• https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
• https://color.adobe.com/es/create/color-wheel (¡súper recomendado!)

También podemos jugar con los niveles de saturación y brillo de un color principal para obtener distintas variaciones. ¿Cuántas? Las suficientes para incluirlas en la interfaz. Si al color principal le aumentamos la saturación pero le bajamos el brillo, conseguimos una variante oscura. En cambio, si le bajamos la saturación pero aumentamos el brillo, obtenemos una variante clara.

Es importante que no nos olvidemos de los grises. Podemos aplicar la misma técnica con el blanco y el negro para conseguir una escala de grises que resalte el protagonismo de los colores principales. Además, estos tonos ayudan al usuario a concentrarse y no desviar la atención.

Otro punto importante es éste: Total white, yes. Total black, not. Incluyamos el color blanco para dar espacio y armonía a nuestro diseño,pero evitemos el negro absoluto. Genera un contraste fuerte e incómodo y cansa la vista. Hasta los modos oscuros usan grises profundos, ¡nunca negro!

Hablando de oscuros y de grises, ¿sabías que (aproximadamente) 350 millones de personas en el mundo son daltónicas? Seguro es un número más grande del que pensabas. Es muy importante que analicemos cuidadosamente el nivel de contraste de los colores que elegimos para nuestra interfaz y que hagamos pruebas en escalas de grises. 

Una gran verdad de la accesibilidad, que se relaciona con UX, es que no podemos basar nuestro diseño únicamente en colores. No podemos mostrar los mensajes de error ni pedirle a los usuarios que tomen decisiones sólo guiándolos con colores. No es ético.

 

 

No quiero dejar pasar esta oportunidad para hablar un poquito sobre este tema, así que acá dejo 5 consideraciones básicas de accesibilidad en relación a la colorimetría, para que las interfaces sean accesibles para todas las personas: 

1. La información comunicada en el sitio deberá estar disponible sin color (ej: mediante el contexto o marcadores).
2. Contraste figura-fondo: Si un texto o una imagen tienen poco contraste con su fondo, no podrán ser percibidos por personas daltónicas o con baja agudeza visual.
3. Los colores de fondo y primer plano deben tener suficiente contraste para que sean percibidas por pantallas en blanco y negro.
4. El contraste MÍNIMO del texto y las imágenes de texto es de un ratio de 4.5:1.
5. Con respecto al contraste mejorado, la presentación visual del texto y de las imágenes de texto deben tener un ratio de contraste de al menos 7:1.

Los estándares de accesibilidad intervienen en muchos, muchos más aspectos que sólo en el color. Es un tema extremadamente importante, delicado y del que veo que se habla poco. “Hacer interfaces accesibles es caro y poco estético” es una concepción totalmente sesgada. La accesibilidad es cara si se aplica al final del proceso como un retoque final y para ello se contrata a una consultora o profesional para hacerlo, pero ese es un procedimiento incorrecto, así como es incorrecto aplicar UX al final, tres semanas antes del lanzamiento. UX y accesibilidad (que deberían ser uno solo) se aplican durante todo el proceso de diseño y desarrollo. La accesibilidad no es cara si tu equipo está capacitado sobre las buenas prácticas. También es una cuestión que toca cuestiones de ética y moral, es una decisión sobre la manera en la que elegimos hacer tecnología. 

Me quedé con ganas de hablar un rato más sobre esto… Qué dicen, ¿hacemos un artículo exclusivo de accesibilidad? 

Podes leer más sobre pautas de accesibilidad acá: https://www.w3.org/WAI/standards-guidelines/wcag/es 

Ahora sí, antes de cerrar la lectura de hoy, te dejo un artículo sobre color aplicado a UI:

https://material.io/design/color/the-color-system.html

Me despido con esta pequeña reflexión: el buen gusto no nace de la nada. Mi mayor consejo es que entrenen el ojo, vean proyectos en Behance, en Dribble, que se inspiren en Pinterest, en todas las herramientas que encuentren. Busquen inspiración, guarden imágenes, reciclen ideas, analicen fotos y composiciones en la vida real. ¡El mundo del color es apasionante!