La psicología del color en el diseño web: qué respalda la investigación y qué no

El color cambia cómo se siente una web, pero las reglas populares como «el azul genera confianza» y «el rojo vende» son más débiles de lo que parecen. Las asociaciones varían según la cultura, el sector y el contexto, y la investigación sobre color y comportamiento de compra no es concluyente. Las decisiones de color que ayudan de forma fiable a una web de empresa son más sencillas: buen contraste, un color de acento claro para la acción principal y coherencia con tu marca.

Puntos clave

• Las asociaciones de color existen pero dependen de la cultura y el contexto, así que ningún color funciona como un disparador universal.
• El contraste entre texto y fondo influye más en los resultados que el tono que elijas.
• Usa un color de acento para la acción principal, y que aparezca poco en el resto de la página.
• No confíes nunca solo en el color para transmitir significado, porque una parte de los visitantes no distingue algunos colores.
• Adapta la paleta a tu público y a tu promesa, y aplícala con coherencia.

Qué comunican los colores

La gente sí asocia colores con sensaciones. Los azules y verdes oscuros suelen leerse como tranquilos y serios, por eso los usan muchos bancos y despachos de abogados. Los colores cálidos, como el naranja y el amarillo, suelen parecer enérgicos y cercanos. El blanco y negro con acentos discretos suele leerse como premium o minimalista.

Estas asociaciones son tendencias, no leyes. El rojo indica peligro en un contexto y celebración en otro, y el blanco significa cosas distintas en culturas distintas. Si te diriges a un público internacional, comprueba qué significan tus colores en cada mercado antes de decidir.

Por qué «el azul genera confianza» es demasiado simple

El azul es habitual en finanzas y software, así que la gente puede asociarlo con esos sectores. Es una costumbre de categoría y no una prueba de que el azul cause confianza. La confianza en una web viene sobre todo de información clara, personas reales, pruebas visibles y un acabado profesional, como explica nuestro artículo sobre la página de inicio para empresas de servicios. Una web bien hecha en un color inesperado gana a una web desordenada en el color «correcto».

Lo mismo pasa con las afirmaciones de que un color de botón convierte mejor que otro. Los resultados dependen de cuánto destaca el botón respecto a lo que lo rodea, y una prueba en una web no se traslada a otra.

Primero el contraste

El texto legible es el caso más claro en que el color tiene un efecto medible. Las Pautas de Accesibilidad para el Contenido Web piden una relación de contraste de al menos 4,5 a 1 para el texto normal y de 3 a 1 para el texto grande en el nivel AA. Un texto gris claro sobre blanco puede verse elegante en el monitor de un diseñador y ser ilegible en un móvil al sol.

Comprueba los colores de tus textos y botones con un verificador de contraste gratuito. También forma parte del trabajo de accesibilidad que describimos en nuestra lista de comprobación de la Ley de Accesibilidad.

Un acento para la acción principal

Una página en la que todo es llamativo no tiene un punto de atención. Elige un color de acento y úsalo para la acción que más quieres que hagan los visitantes, como reservar una llamada o enviar una consulta. Deja el resto de la interfaz en tonos neutros. El acento funciona porque es escaso, y la vista va a lo que es diferente.

Es uno de los principios que describimos en principios de diseño para la conversión.

No confíes solo en el color

Aproximadamente uno de cada doce hombres tiene algún tipo de alteración en la visión del color, así que el rojo y el verde en particular pueden parecer iguales para muchos visitantes. Las WCAG indican que el color no debe ser la única forma de transmitir información. Un error en un formulario debe mostrar un icono o un texto además del borde rojo, y un gráfico debe usar etiquetas o tramas además de colores.

Elegir una paleta para tu negocio

Empieza por tu público y tu promesa. Una maderera familiar, un despacho de abogados y un estudio de diseño necesitan tonos distintos. Elige un conjunto pequeño: un neutro oscuro, un neutro claro, un color principal de marca y un acento. Comprueba el contraste de las combinaciones, míralas en un móvil y aplícalas igual en el logotipo, la web, los documentos y los perfiles sociales. Nuestro artículo sobre sistemas de marca frente a logotipos explica por qué importa la coherencia.

Si quieres ayuda con esto, reserva una llamada de descubrimiento gratuita de 30 minutos, solicita la auditoría web gratuita o mira cómo lo resolvemos en nuestro trabajo.