Esta es una faceta primordial al definir las líneas
maestras de diseño de un web site: va a tener una influencia realmente grande
en como lo perciban los usuarios y la sensación que les quede después de la
visita. Sin embargo existen criterios objetivos si se quiere obtener un diseño
equilibrado y agradable y, sobre todo, que ni estrese ni canse.
Es arriesgado establecer una norma estricta, ya que 6
colores simultáneos en una página pueden ser demasiados si existe un gran
contraste entre ellos. Con menos de 3, las posibilidades de que la página sea
anodina y aburrida son muy grandes.
Color Primario: es el tono básico de la
página, el que la define, y el que ocupa la gran mayoría de la misma. Sería el
color del atributo "background" de la página.
Color Secundario: es el segundo tono
predominante en la página, aunque en mucha menor medida que el primario.
Normalmente debe acotar o resaltar áreas y debe ser bastante próximo en tono al
primario.
Color Destacado: es el color que se
utiliza para resaltar aspectos concretos de la página. Por definición debe
contrastar mucho con los colores primario y secundario y, por tanto, debe
utilizarse con moderación. Puede utilizarse el Complementario o
el Complementario Escindido del
color primario de la página.
Según su posición relativa en el Círculo Estándar de
Color, los colores pueden ser:
Colores Análogos: Para un color dado, sus
colores análogos son aquellos que se encuentran a ambos lados del mismo en el
círculo de color.
Por ejemplo los análogos del naranja serían el rojo y
el amarillo.
|
|
|
|
|
|
Usados juntos producen sensación
de armonía. Suele ser una buena idea usar colores
complementarios como primario y secundario de
una página web.
Colores Complementarios: Son
aquellos que se encuentran opuestos en el círculo de color (por ejemplo el
amarillo y el violeta). Usados juntos producen un gran
contraste destacando mucho
Dos colores complementarios serían por ejemplo el rojo
violáceo "crimson" y elturquesa
"turquoise".
|
|
|
|
También suele ser una buena alternativa utilizar el color
complementario del secundario.
Colores Monocromáticos: Son
aquellos que se encuentran aislados, sin presencia de otros colores. Usados
producen sensación de unidad, homogeneidad y robustez. Se puede evitar la monotonía utilizándolos condiferente
luminosidad (más claros y más oscuros).
|
|
|
|
|
|
Colores Complementarios Adyacentes: Dado
un color, sus complementarios adyacentes son los colores
análogos de su color complementario.
|
|
|
|
|
|
Colores Triada: Tres olores constituyen
una Triada cuando sus tonos
son equidistantes en el Círculo Estándar de Color.
|
|
|
|
|
|
Utilizar un esquema de color en triada suele ser una
buena solución cuando se desea un diseño colorido, ya que la mezcla estará bien
balanceada.
Esquema Cromático Monotono: Un esquema
de color monotono lo constituyen un
único tono de colorjunto a sus posibles variaciones en
términos de tintes, luminosidad y saturación.
|
|
|
|
|
|
En el caso probable se sensación de monotonía, siempre es una buena solución introducir negro
y blanco.
Esquema Acromático Monotono: Un esquema
de color acromático monotono es un caso particular
del esquema de color monotono constituído sólo por colores
neutros dentro de la gama del negro
al blanco.
|
|
|
|
|
|
|
|
Buscandlo una definición intuitiva, podemos
simplificar y decir que el contraste entre dos colores, es la diferencia que hay entre ambos. El contraste
será mayor cuanto mayores sean las diferencias entre ambos en términos de:
- Tono
- Luminancia
- Crominancia
Cuando se diseña una página web el elegir el contraste
entre los colores que vamos a usar es muy importante porque va a influir
directamente en la sensación que vamos a transmitir a los visitantes.
Si en nuestras páginas utilizamos por ejemplo un marco
del área de trabajo gris y queremos utilizar un verde para áreas resaltadas, no
es lo mismo elegir la combinación:
|
|
|
|
Que elegir esta otra:
|
|
|
|
En el segundo caso la gran luninosidad de ambos
colores, y en especial la del verde, hace que el contraste sea demasido grande
y la combinación resulte agresiva.
La Teoría del Color define muchos tipos de contraste
y, aunque algunos no son especialmente aplicables a páginas web, es muy
interesante conocerlos para profundizar en el conocimiento del efecto de los
colores.
Contraste de
Tono: Está relacionado directamente con las distancias entre
dos colores dentro del Círculo Estándar de Color descritas en el apartado 3. Relación
entre colores. así, cuanta mayor es la distancia entre dos colores
dentro del círculo, mayor es el contraste entre ambos.
|
|
|
|
Entonces, una pareja
de colores complementarios produce el máximo
contraste, mientras que para cualquier color el que menor
contraste produce con este es su adyacente.
Es interesante el contraste ce tono entre colores
fríos y cálidos. Los colores cálidos siempre aparecen al
espectador más próximos,
mientras que los colores fríos aparecen al espectador más
distantes.
Para la relación texto
y background normalmente no será suficiente contraste
de tono ya que no garantizará legibilidad suficiente. Será
necesario aplicar algún tipo de contraste adicional.
Contraste de Luminancia (o de
Valor): Permite crear grandes contrastes con el mismo tono de
color sólo mediante el brillo de luz:|
|
|
|
En general este tipo de contraste, aún siendo grande,
es agradable al ojo humano, con lo que usarlo en diseños web suele ser trabajar
sobre seguro. Como contrapartida, no arriesgar en la combinación de tonos,
puede significar apostar por un diseño convencional, poco impactante.
Contraste de Saturación: El
contraste de saturación con frecuencia es el más adecuado para resaltar
aspectos de la página web de una forma moderada, poco estridente.
|
|
|
|
Un efecto interesante se obtiene utilizando áreas con
diferentes saturaciones con un fondo gris: se produce una sensación de
transparencia que puede ser muy apropiada en ciertas circunstancias.
|
|
|
|
|
|
Contraste Simultáneo: Es
un efecto creado por nuestro sistema visual que, dado un color predominante,
tiende a requerir su color complementario.
Este efecto puede obtenerse combinando dos colores
brillantes pero que no sean complementarios, o, simplemente, utilizando un
color brillante sobre un background neutro (un color de la gama de los grises).
|
|
|
|
Este tipo de contraste tiene la ventaja de resaltar
diferencias entre áreas de forma impactante, pero sin la agresividad que
producen los complementarios. Sin embargo puede provocar tensión e
inestabilidad y debe utilizarse con prudencia.
|
Esto es un texto
|
En este caso se ha utilizado un Contraste
de Tono, poniendo un lienzo violeta y el texto en
turquesa, que es complementario adyacente del primero, por lo que la
combinación debería aportar suficiente contraste de color.
Sin embargo, vemos que para el caso de textos, no es
así: la combinación no aporta suficiente contraste y leer el texto cansa la
vista (sobre todo si fuera un párrafo largo). Aunque la mezcla es natural y no
es desagradable, no es adecuada para textos.
|
Esto es un texto
|
En este segundo caso, al contraste de color inicial le
hemos añadido Contraste de Luminancia, oscureciendo el background e iluminando el
foreground. La combinación de ambos contrastes aumenta sensiblemente la
legibilidad del texto.
|
Esto es un texto
|
Los colores tienen unas características naturales de
luminosidad. Así el turquesa o azul mar es naturalmente más claro que el rojo
violáceo. Habida cuenta que son complementarios, la mezcla funciona bien y
aporta suficiente contraste.
|
Esto es un texto
|
Esto es un texto
|
Sin embargo, invertir las relaciones naturales entre
colores no funciona. Aportando contraste de luminancia y de saturación
simultáneamente conseguimos oscurecer el turquesa y aclarar el crimson pero,
aunque consiguieramos suficiente contraste para resaltar el texto (que vemos
que no es el caso), la vista no se sentiría cómoda ante la mezcla.
Como acabamos de comentar usar convenientemente el
contraste es especialmente importante cuando se trata de escribir texto y
resaltarlo suficientemente para garantizar su legibilidad a la totalidad de
nuestros usuarios.
Pero no sólo es una cuestión de contraste. Hay
combinaciones de colores que:
·
Son especialmente conflictivas para
usuarios con disfunciones en la vista
Ceguera al color:
Hay múltiples tipos de disfunciones en
la visualización de los colores, como describimos en nuestra página
de los colores. Sin embargo a efectos de accesibilidad sólo
necesitamos preocuparnos de los daltónicos,
grupo que constituye la inmensa mayoría de los que sufren alteraciones en la
percepción del color.
