Uso de los colores en diseño web

En Designreviver.com han publicado un excelente artículo sobre la teoría del color para diseñadores web, algo que quizás no muchos tengan en cuenta, pero ha quedado demostrado que es muy importante para una buena accesibilidad por parte del usuario, entre otras variantes.

Lo que sigue a continuación no es una traducción exacta sino una mera guía para entender los puntos que se tratan, pero que igualmente considero serán de gran ayuda a la hora de pensar en nuestros colores y cómo utilizarlos.

El análisis del color que se realizó en este artículo parte desde el punto de vista científico, más que nada para crear una nueva significación que enriquezca el conocimiento y de esa forma intentar nuevas formas de abordar el tema e incluso generar en nosotros la habilidad de percibir estas características más fácilmente.

Se abordan siete cuestiones que deberían tenerse en cuenta para la correcta percepción y utilización del color en diseño web, a saber:

Impacto emocional | Enfoque del usuario | Efectividad en comunicar información

Efecto de las combinaciones | Impacto y límites de la variedad | Sugestión subliminal

Color como factor de accesibilidad

Impacto emocional

La psicología cree que el color hace más que solamente impactar nuestro sistema visual. Por ejemplo, los mismos mecanismos que reciben el color, son los que a través del hipotálamo, permiten a los pulsos llegar a la pituitaria y la glándula pineal. Se cree que algunas reacciones temporarias que afectan el estado de ánimo ocurren como resultado de la exposición a ciertos colores (rojo para estimular, azul para calmar, entre otras).

Buscar la reacción del usuario espontáneamente puede ser algo muy útil.  Hay evidencia fehaciente sobre la teoría de la percepción del color y los efectos potenciales que podemos lograr utilizándolos.

Enfoque del usuario

Cuando hablamos de aplicaciones, podemos controlar o guiar al usuario sobre qué camino seguir. En los sitios web, necesitamos brindar el contenido necesario para promover estadías prolongadas. Si bien no podemos controlar el foco del usuario, podemos utilizar métodos subliminales y el color es una de las formas de hacerlo.

El más utilizado en estos casos es la aplicación de colores neutros o pasteles en general y colores vivos en aquellas zonas en las que deseemos que nuestros visitantes se enfoquen.

Efectividad en comunicar la información

Estudios recientes han demostrado que las clásicas páginas blancas con letras negras no serían el ideal para la visualización humana. Es mejor si el contraste se atenúa, utilizando por ejemplo colores pastel de fondo con textos oscuros, el tema del contraste es una de las principales razones por las que dejo de leer artículos muchas veces, es eso, o definitivamente bajarle el brillo al monitor, pero no es algo que podría denominar placentero.

Como diseñadores web deberíamos considerar incluir un color suave en lugar del blanco, algo que podría hacer que nuestros lectores se queden por un tiempo. Así se aseguraría que lo que queremos decir a través de nuestros sitios (en especial si somos de escribir mucho) llegue como queremos y no muera en el intento.

Efectos de las combinaciones

Si pensamos en las versiones impresas, sus costos siempre implican que utilicemos menos colores. En el caso web, hay completa libertad para usar la cantidad de tonos que necesitemos, por lo que se pueden explorar combinaciones que favorezcan nuestro diseño y de esa manera agregar valor.

Para ello, es necesario contar con armonías de color, que aseguran la correcta utilización de las paletas de colores. Así como existe una relación entre los colores y la reacción humana a ellos. También existe una reacción hacia las combinaciones de colores que se encuentran en armonía.

Impacto y límites de la variedad

Al elegir entre tanta variedad de colores y sus combinaciones cómo decidimos cuántos y cuáles son necesarios (o suficientes). En el uso del color hay un rango de colores que se podría denominar «justo» para aplicar en diseño, y sería, siempre utilizar entre 3 y 5 colores.

Menos de 3 hará que nuestro sitio se vea monocromático, más de 5 logrará un nivel interesante de distracción (que estamos intentando evitar).

Sugestión subliminal

Quizás no existan pruebas fehacientes, pero los mensajes subliminales y sus efectos continúan siendo estudiados por la psicología, y son denominados estímulos y estímulos negativos.

En los estímulos generalmente se prepara al usuario a recibir determinado objeto para obtener una ventaja de la comunicación entre uno y otro. En el caso de los estímulos negativos, se puede provocar en la persona, un retraso en identificar lo que se quiere transmitir, aún cuando es obvio.

El perfecto ejemplo de esto sería ese párrafo con palabras en diferentes colores dónde encontraremos la palabra «verde» en color rojo, para quienes lo han intentado saben como podemos confundir nuestro cerebro a partir de esta práctica.

Si bien habría que investigar sobre las implicancias éticas o legales de esta práctica, lo que se quiere explicar con esto es que es necesario dar un mensaje claro aún desde los colores. Lo ideal siempre es reducir al mínimo posible los efectos subliminales del color, si tenemos un sitio de ecología por ejemplo lo ideal será utilizar tonos verdes, ya que los grises o neutros podrán asociarse inconscientemente a la polución.

Color como factor de accesibilidad

Crease o no, los colores también tienen una teoría de accesibilidad. Si bien la web nos permite alcanzar límites impensables hace algunas décadas, existen millones de personas que no pueden percibir los colores en su totalidad, incluso, miles que, con problemas oftalmológicos solo ven las cosas borrosas. Se puede alcanzar ese límite también.

El W3C contiene una lista de herramientas que los diseñadores web pueden utilizar para optimizar la accesibilidad. Una de ellas es Access Color, que ayuda al diseñador a garantizar que la elección de colores no afectará a aquellos con problemas en la vista, incluso la forma en la que podemos decidir sobre la separación (en el esquema cromático) de colores.

Para esto el W3C nos informa sobre el valor de brillo de los tres colores en esquema RGB: Rojo x 299 + Verde x 587 + Azul x 114 /1000. Con esto en mente nos indica que la visualización correcta de dos colores será correcta si la diferencia entre sus brillos es mayor a 125 y la diferencia de color mayor a 500.

Es un poco complejo, pero a lo que se quiere apuntar con esto es que al realizar un esquema cromático son cosas que deberíamos tener en cuenta si nuestro objetivo es llegar a todos. Si utilizan la herramienta en su sitio, se sorprenderán.

Siempre que encuentro este estilo de artículos en Inglés, pienso en todas aquellas personas que nos leen a las que la información no les llega por estar en otro idioma. Gracias a mi educación puedo tomarme el atrevimiento de traducirlos y brindarlos también al público en Español (obviamente siempre citando la fuente, no?).

Aparentemente hay lectores a los que les molesta que haga esto, pero son los menos. Sé que muchos aprecian el trabajo que lleva traducir un post, adaptarlo y generar ejemplos propios, y no solamente enviar el link para «que se arreglen» aquellos que no pueden leer este idioma.