Saltar al contenido →

El color en la interfaz

Nos rodean, nos influyen, nos caracterizan y pese a que la percepción de color varia de una persona a otra, a lo largo de nuestra vida escogemos constantemente entre ellos, generando también, patrones de conducta y convirtiendo su percepción en un campo apasionante para la definición de la experiencia de usuario/a.

Como cualquier elemento de la interfaz, el color también habla, define, acompaña y condiciona, pudiendo ser un aspecto tan sutil como efectivo que, sin duda, resulta interesante tener en cuenta.

Siete caracteres

213 son los colores que forman parte de la paleta RAL Classic, 1.959 son las muestras de colores estándar que recoge NCS en su álbum, sólo las guías Pantone ofrecen una paleta de 2.868 colores obtenibles en el proceso de impresión en cuatricromía y miles de colores pueden formar parte de una simple fotografía. En la interfaz, un color puede quedar concretamente simplificado a la ordenación estructural de siete caracteres: una almohadilla precedente a un código hexadecimal que define a través de tres parejas, las proporciones e intensidades de la triada de colores primarios aditivos RGB, una alternativa en pantalla que puede llegar a precisar más de 16 millones de matices.

Partiendo del esquema

Y es que más allá de la correcta aplicación de colores, para garantizar los principios de accesibilidad que faciliten la identificación y legibilidad, cada sitio web o aplicación que desarrollamos cuenta con un esquema de color que concreta y distingue sus áreas y jerarquías informativas, generalmente, correspondidas con una estudiada combinación de tonos con el fin de resaltar, disimular o harmonizar los diferentes elementos en el conjunto.

Jan V.White a través de sus experiencias y estudios, publicaba en 1996 en su libro “Color of Impact” como el color podía ayudar a aumentar la productividad notablemente: reduciendo el tiempo de búsqueda visual hasta el 80%, llegando a aumentar la participación de lectura en más de un 50% o ayudando hasta en un 70% al reconocimiento de una marca. Publicaciones posteriores, como “The Contributions of Color to Recognition Memory for Natural Scenes” de Felix A. Wichmann, Lindsay T. Sharpe y Karl R. Gegenfurtner aportaban que, además, el color ayuda a recordar de manera más eficiente las imágenes frente a imágenes en escala de grises.

El uso del color debe contar con el detalle que la responsabilidad merece, pues la sobrecarga o su incorrecta utilización puede provocar efectos contraproducentes ya que, la generación de demasiado ruido visual convertiría los diferentes focos en meros puntos paisajísticos dentro de la información.

Compartiendo con la regla del diseño interior “60-30-10” (define la utilización de un color en el 60% de la estancia como color dominante, un 30% como color secundario y un 10% como color de acento para los detalles), son muchos/as los/as profesionales que optan por acotar a tres el número de colores del esquema de un sitio web.

No obstante, definir el número de colores vendrá siempre condicionado por las peculiaridades del diseño que, en la segmentación del prototipo pueda presentar según sus áreas, sus necesidades (como curiosidad, citar el teorema de los cuatro colores que establece que la coloración de cualquier mapa se puede resolver con cuatro colores de manera que las regiones adyacentes contengan siempre colores diferentes).

Para gustos, los colores

En cuanto a qué color para qué elemento, más allá de la no tan concluyente aceptación que establece la preferencia por el azul o el rosa según el género (como podemos ver por ejemplo, en “His and Hers Colors” del artista visual Stephen Von Worley) contamos con multitud de infografías, publicaciones y teorías que recogen las preferencias de color más frecuentes según la edad, la cultura… Así como, las sensaciones que evocan. Donis A. Dondis decía en su libro “La síntesis de la imagen” que la percepción del color era la parte simple más emotiva del proceso visual y es que, ciertamente, resulta imprescindible tener en cuenta el target para establecer el código de lenguaje visual apropiado. En este punto, no podemos pasar por alto la recomendación de dos libros: “La armonía de los colores” de Tina Sutton y Bride M. Whelan y “Colores. Historia de su significado y fabricación” de Anne Varichon.

Pero los colores no son percibidos de manera aislada. Su percepción se encuentra directamente condicionada por su color adyacente (o color de fondo), llegando incluso a producir percepciones de profundidad como es el caso de la cromostereopsis generando en ocasiones cierto rechazo visual.

Las armonías van sobre ruedas (y otros)

Las armonías más comunes se establecen sobre ruedas de color (o círculos cromáticos) que se determinan en función de la proximidad entre los tonos, pero también pueden verse representadas de manera esférica (basándose en el sistema de color de Munsell), lineal (para establecer la saturación o el brillo), de manera triangular o hexagonal (como representa el círculo cromático de Johanes Itten) u otros.

Actualmente, contamos con multitud de recursos que nos permiten generar armonías y esquemas de color con precisión (más información en el apartado Herramientas y otros recursos online): análogas, complementarias, monocromas, tríadas…

El color no lo es todo

Pero los colores por sí solos no siempre llegan a ofrecer la respuesta interactiva que pretenden y es según Prevent Blindness se estima que el 8% de los hombres y menos del 1% de las mujeres tienen algún tipo de particularidad en la visión del color.

Es por ello, que ha de considerarse:

  • La relación de contraste entre elemento y fondo con especial atención en los adyacentes de la rueda cromática.
  • La complementación de texturas o incrustación de textos en las columnas o porciones de las tablas y gráficos que representen datos.
  • Que los enlaces sean reconocibles independientemente del color sobre todo para personas con daltonismo acromático utilizando, por ejemplo, la propiedad underline en el estilo del texto.
  • El acompañamiento textual (*) también en los campos requeridos de los formularios.
  • Que los botones de validación o cancelación dispongan de iconografía para la identificación de dichas acciones.
  • La utilización de identificadores textuales para los colores en los casos en los que el/la usuario/a deba seleccionarlo como, por ejemplo, en el momento de realizar la compra de un producto.

Herramientas y otros recursos online

Adobe Color CC. https://color.adobe.com/es/create/color-wheel/
Color Hunt. http://www.colorhunt.co/
Color Matters. https://www.colormatters.com/
Color palette generator. https://www.canva.com/color-palette/
Colorsystem, Colour order systems in art and science: http://www.colorsystem.com/
Colorzilla. http://www.colorzilla.com/chrome/
Colour Code. https://colourco.de/
COLOURlovers. http://www.colourlovers.com/
Colrd. http://www.colrd.com/
Coolors. https://www.coolors.co/
Flat UI Colors 2. https://www.flatuicolors.com/
HTML Color Codes.https://htmlcolorcodes.com/
Material Design. https://www.material.io/color/
Material Design Color Palette Generator. https://www.materialpalette.com/
Material Design, Guidelines. https://www.material.io/guidelines/style/color.html
Paletton, The Color Scheme Designer. http://www.paletton.com/
Sphere: Color Theory Visiualizer. https://galactic.ink/sphere/
TinEye. http://labs.tineye.com/multicolr/
Ultimate CSS Gradient Generator. http://www.colorzilla.com/gradient-editor/
W3schools, Colors Tutorial. https://www.w3schools.com/colors/
WebAIM: Color Contrast Checker. https://www.webaim.org/resources/contrastchecker/

Publicado en General