Por qué debes evitar las combinaciones de colores vibrantes

En este breve artículo aprenderás cómo es que la vibración del color afecta a la legibilidad de la interfaz en el contexto del diseño web y del diseño de interfaces.

¿Atrevido o chillón?

Entre los diseñadores de interfaces, hay una tendencia emergente por imitar las combinaciones de colores chillones que se encuentran a menudo en el diseño de impresión. Aunque en parte se debe a tendencias ideológicas, este impulso también surge de la nueva gama tipográfica disponible para el diseñador web moderno, que fomenta los diseños tipo impresión y la tipografía grande. Es importante señalar las distinciones entre cada medio que hacen que el color vibrante sea algo más permisible en la impresión, y menos en la web.

En la impresión, el uso de una combinación de colores fuertes a menudo hace la diferencia entre ser ignorado en un estante de revistas y lograr una venta. Por otra parte, en la interfaz de usuario, tenemos otras consideraciones que tienen prioridad sobre la captación de la atención del usuario por la fuerza, en particular, la legibilidad del texto.

¿Qué es la vibración?

Uno de los fenómenos primarios que surge de los esquemas de color atrevidos y altamente saturados es un color aparentemente "vibrante", un fenómeno en el que los bordes de dos colores directamente adyacentes parecen fundirse, desdibujarse y brillar, dando la ilusión de movimiento.

Josef Albers, el famoso teórico del color, advirtió sobre el uso de colores vibrantes en su clásico, Interactions of Color (Interacciones del Color):

"Este efecto inicialmente excitante también es agresivo y a menudo incluso incómodo para nuestros ojos. Raramente verás su uso excepto cuando se usa para crear un efecto de grito en la publicidad, y como resultado disgusta, desagrada y se evita".

Para que un par de colores tengan una baja visibilidad entre sí, es necesario que sean equilibrantes, teniendo un valor de brillo similar. Sin embargo, para que vibren notablemente, los colores serán generalmente de alta saturación y complementarios entre sí, desplazados aproximadamente 180º en la rueda de colores (círculo cromático).

En el ejemplo anterior, los tonos rojos y azules se encuentran en lados opuestos de la rueda de colores (aunque no directamente opuestos) y ambos tienen un brillo de 100.

Spotify se ha convertido en sinónimo de combinaciones de colores atrevidos, utilizados con gran resultado para llamar la atención. A veces estas combinaciones pueden ser desconcertantes, incluso si no están vibrando en el sentido más literal; como el botón contra el fondo púrpura en el ejemplo anterior. Los ojos de los usuarios reconocerán lo que es, pero algunos pueden tener dificultades para determinar los bordes exteriores de la forma.

La legibilidad

El texto de la interfaz se ve significativamente obstaculizado cuando se establece en color vibrante y equilibrante. He seleccionado estos colores vibrantes a medida:

Cuando se produce la vibración del color, el elemento más afectado por el efecto de la distorsión brillante es el borde entre los dos colores. Por eso la vibración es particularmente peligrosa en el contexto de las fuentes de interfaz de usuario, los pequeños iconos y otros elementos detallados que no son lo suficientemente grandes para compensar sus borrosos bordes vibrantes.

Este es el mismo conjunto de muestras, esta vez visto por alguien con daltonismo total:

Además de que generalmente esos colores vibrantes y borrosos resultan molestos para aquellos que ven a todo color, dar colores de igual luminancia a personas que sufren de daltonismo puede ocasionar que no vean nada en absoluto. Aunque hay varios niveles de daltonismo, es mejor ir por lo seguro cuando se trata de la accesibilidad.

Por ejemplo, el icono de la papelera en el Apple Watch no es visible para los que tienen daltonismo:

Conclusión

Los colores vibrantes pueden utilizarse con buenos resultados, pero presentan un verdadero peligro para la usabilidad de las interfaces de usuario, y pueden ser muy pesados si no se consideran deliberadamente antes de su uso. ¡Considera eso cuando estés diseñando!