Por qué debería evitar las combinaciones de colores vibrantes

En este rápido artículo, aprenderá cómo la vibración del color afecta la legibilidad de la interfaz en el contexto del diseño web y de la interfaz..

Negrita o Garish?

Existe una tendencia emergente entre los diseñadores de interfaces para imitar los esquemas de colores llamativos que se encuentran a menudo en el diseño de impresión. Si bien se debe en parte a las tendencias ideológicas, este impulso también surge de la nueva gama tipográfica disponible para el diseñador web moderno, que fomenta diseños de tipo impreso y de gran tamaño. Es importante tener en cuenta las distinciones entre cada medio que hacen que el color vibrante sea algo más permisible en la impresión, y menos en la tela..

Colores vibrantes en la web de Frooti.

En la impresión, el uso de un esquema de colores en negrita a menudo significa la diferencia entre ser ignorado en un estante de revistas y hacer una venta. Por otro lado, en la interfaz del usuario, tenemos otras consideraciones que prevalecen sobre el hecho de captar la atención del usuario por la fuerza, en particular, la legibilidad del texto..

¿Qué es la vibración??

Uno de los fenómenos principales que surgen de los esquemas de color atrevidos y altamente saturados es un color aparentemente "vibrante", un acontecimiento en el que los bordes de dos colores directamente adyacentes parecen fusionarse, difuminarse y brillar, dando la ilusión de movimiento.

Las dos muestras externas tienen texto con color vibrante, mientras que la muestra del medio tiene texto con valor de equilibrio.

Josef Albers, el destacado teórico del color, advirtió contra el uso de colores vibrantes en su clásico, Interactions of Color:

“Este efecto inicialmente emocionante también se siente agresivo y, a menudo, incluso incómodo para nuestros ojos. "Uno lo encuentra raramente usado, excepto por un efecto de gritos en la publicidad, y como resultado es desagradable, desagradable y evitado".

Para que un par de colores tenga poca visibilidad entre sí, es necesario que sean equilibrantes, que tengan un valor de brillo similar. Sin embargo, para vibrar notablemente, los colores generalmente serán de alta saturación y serán complementarios entre sí, desplazados aproximadamente 180º en la rueda de color..

Azul (HSB 210, 99, 100) sobre rojo (HSB 12, 99, 100)

En el ejemplo anterior, los tonos rojo y azul se pueden encontrar en lados opuestos de la rueda de colores (aunque no directamente opuesto) y ambos tienen un brillo de 100..

Spotify EDM

Spotify se ha convertido en sinónimo de esquemas de colores llamativos, utilizados con gran efecto para llamar la atención. A veces, estas combinaciones pueden ser desagradables, incluso si no vibran en el sentido más verdadero; 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 externos de la forma. 

Legibilidad

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

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

Aquí está el mismo conjunto de muestras, esta vez visto por alguien con ceguera a todo color:

Además de los a menudo molestos colores vibrantes y borrosos para aquellos que ven a todo color, dados los colores de igual luminosidad, aquellos con ceguera al color pueden terminar sin ver nada en absoluto. Si bien hay diferentes niveles de ceguera al color, lo mejor es jugar de forma segura cuando se trata de accesibilidad..

Aquí, por ejemplo, el icono de papelera en el Apple Watch no es visible para aquellos con ceguera al color:

Visión de color (izquierda) versus ceguera de color (derecha)

Conclusión

Los colores vibrantes se pueden utilizar con buenos resultados, pero presentan peligros reales en la facilidad de uso de las interfaces de usuario, y pueden ser de mano dura si no se consideran deliberadamente antes de su uso. Tenga esto en cuenta al diseñar!