El tratamiento del color es uno de los aspetos más importantes del diseño web. En este artículo del Curso de diseño web vamos a ofrecer las claves de la elección de los colores, atendiendo a cada uno de los bloques habituales que forman una web y la función que desempeñan.

Cada elemento de una página web y cada agrupación de ellos debe desempeñar un papel perfectamente definido, que además debe corresponderse con su peso visual dentro del total de la página. Una de las herramientas más potentes con las que cuenta el diseñador web para cumplir este objetivo es el uso adecuado de los colores.

En los casos de páginas más complejas, y desde el punto de vista de lo que observa el usuario, podemos dividir estas en cuerpo o sección principal, dintel, menú y pie de página.

Sin duda alguna la parte más importante de las mencionadas es el cuerpo de la página , ya que en él va a figurar la información que queremos transmitir al visitante. Por esto, los colores dominantes en ella deben permitir una lectura de contenidos clara y amena, así como una perfecta visualización de sus elementos gráficos. Para ello, deberemos usar un color para el texto que contraste adecuadamente sobre el del fondo de la página.

Buenos contrastes se obtienen: - Con fondos claros y textos oscuros, o al revés.

- Con fondos fríos y textos cálidos, o al revés, siempre que no sean análogos.

El tema del contraste entre fondo y texto es difícil de manejar en las páginas web, debido fundamentalmente a la poca resolución que tenemos en la pantalla del monitor, que suele ser de unos 5.200 puntos por pulgada cuadrada, casi 300 veces menos de la resolución que tiene una página de revista tradicional.

Por esto, el típico conjunto fondo blanco-texto negro sigue siendo en las páginas web el mas idóneo para conseguir un contraste óptimo. Los fondos negros o muy oscuros pueden dar un buen contraste con casi cualquier color de texto que sea luminoso, mientras que los fondos coloreados pueden llegar a trabajar bien si son apagados y de baja saturación, como es el caso de tonos pasteles, grises o tierra.

Por otro lado, no es recomendable usar imágenes de fondo en las páginas web, salvo que esta sea de un color y tono muy apagados y con poco contenido gráfico por unidad de pantalla, ya que despistan mucho al usuario y enmascaran excesivamente el texto y los demás elementos de la página. Sólo se deben usar cuando se realiza un buen estudio del mismo por un profesional del diseño web, ya que además de lo antes expuesto ralentizan mucho la carga de la página.

Los enlaces que figuren en esta sección deben ser claramente diferenciados por el usuario, sobre todo si la página va dirigida a un público muy general. Si no usamos los colores de enlace estándares (azules vivos con texto subrayado), sí que deberemos usar un color que destaque claramente del texto informativo y del fondo.

El dintel se localiza por costumbre en la parte superior de la página, y en él suele (y casi debe) figurar el logotipo de nuestra página, asociación o empresa. Es importante la presencia de un logotipo, ya que crea un signo de continuidad y de identidad en nuestras páginas, mostrando a los visitante rápidamente dónde se encuentran. El color de este debe ser tal que destaque claramente sobre el fondo.

En los idiomas occidentales se leen las páginas de arriba abajo y de izquierda a derecha, motivo por el cual el logotipo se sitúa casi siempre en la esquina superior izquierda. Si el color de nuestro logo es parecido al que vamos a dar al fondo de la página podemos crear un entorno alrededor del mismo que permita su correcta visión, lo que se suele conseguir situando una banda en la zona superior de la página, con un color de fondo diferente al del cuerpo de la misma y tal que el logo destaque adecuadamente sobre él.

También es normal situar en esta zona, a la derecha del logo, un mensaje claro y directo sobre la identidad y contenido de la página.

El menú de navegación es tal vez el elemento más interactivo de una página, facilitando al visitante una rápida navegación por todo el contenido del sitio web. Sus enlaces deben aunar el ser fácilmente visibles con el no ser demasiado impactantes, ya que no deben quitarle importancia ni al cabecero ni al texto del cuerpo.

Podemos crear para esta zona una banda vertical de un color diferente al del cuerpo, que puede ser igual al del cabecero o no. Sus enlaces pueden fundirse un poco con el fondo, dando así una sensación de continuidad. Muchos diseñadores se basan el los menús de imágenes para conseguir esto, pues les permiten tener un mayor control sobre el resultado final. En contrapartida, tardarán más en cargar.

Una buena solución es el uso de textos o imágenes que inicialmente no destacan demasiado sobre el fondo, pero que al situar el cursor sobre ellas se iluminan o cambian de color, produciéndose un efecto positivo con ello.

También es corriente usar la parte baja del dintel para insertar en ella el menú de navegación. En este caso, su color no debe destacar en exceso sobre el del dintel, debiendo buscar siempre la plena integración visual entre ambos.

Por último, el pie de página es el elemento menos importante de la página, de tal forma que muchos autores ni siquiera lo consideran. Caso de usarse, no conviene que su color cambie respecto al del fondo del cuerpo, y si lo hace debe ser muy ligeramente, ya que si no podemos distraer la atención del usuario y crear un cuerpo de página encajonado.

En el pie de página se suelen colocar enlaces de tipo terciario, enlaces de correo o accesos a servicios secundarios que proporcione nuestro sitio web.