Colores y hojas de estilo que ayuda a navegar

Resumen:

Colores que ayudan a navegar.
Hojas de estilo (CSS). Ayudan a navegar.

1. Colores que ayudan a navegar.

Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro encontrar monitores con 256 colores aunque aun existen algunos y va siendo normal encontrar monitores con millones de colores.

paleta web 216 colores con explicacion sobre calido - frio - saturados

La seleccion de "colores basicos" de nuestro site se debe mantener dentro del rango de 256 colores. Podremos ampliar el rango en elementos no fundamentales (fotos, ilustraciones, etc) pero debemos asegurarnos que el 100% de la poblacion podra acceder a nuestro site sin problemas.

A la hora de seleccionar los colores debemos identificar las partes del site.

A. Colores en la Barra de Navegacion.
Lo mejor es tener dos colores, para identificar el elemento activo de la barra de navegacion y para identificar los elementos apagados. Es mejor si el elemento activo "avanza" sobre los demas elementos con lo que colores calidos (rojo, naranja) y saturados se presentaran mas cercanos al usuario frente a colores frios (azul y verde) y poco saturados.

ejemplo de botones con colores calidos - frios y diferentes constrastes

B. Colores en los enlaces.

Es recomendable conservar los colores estandar (azul subrayado). Si decides cambiarlo, recuerda lo siguiente: Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendras que elegir un color saturado para el estado sin pulsar y otro menos saturado para el estado pulsado.

Sin visitar (Link): Es el color de un link antes de ser pulsado. El color azul es el normal.

Visitado (Vlink): Es el color que presenta un link cuando ha sido pulsado. El violeta (#CC33CC) es el normal.

Si decidimos cambiar el color de los links procura que el sistema de color que elijas sea similar al estandar. Teniendo un color brillante para el estado de "no visitado" y un color mas oscuro para los "enlaces visitados".

Curiosidad: Luego existe el "Alink" que es uno de los misterios del universo microsoft. He buscado informacion sobre que es esto, pero ni dentro de microsoft lo explican de forma clara. El ejemplo que presentan sobre como funciona, en un explorer 5 en mac no funciona.

Como trabajar con Alinks: msdn.microsoft.com/library/tools/htmlhelp/chm/htalink1.asp.

Ejemplo de una pagina que usa el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTalink4.asp.

Sumario sobre temas relacionados con el Alink: msdn.microsoft.com/library/tools/htmlhelp/chm/HTAlink.asp.

C. El Color de Fondo.

El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas recomendable es el fondo blanco (#FFFFFF) o el amarillo claro (#FFFFCC). Otros colores claros son menos comodos para leer, pero si tu site no exige lecturas prolongadas, puedes usarlos para llamar la atencion y conseguir una lectura mas compulsiva.

Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF). El amarillo y negro es una combinacion que llamara la atencion pero tiene un significado mas estatico. Por ultimo, no es recomendable la combinacion de rojo y negro.

ejemplos de alertas y colores