Uso de colores en la Web

El uso de los colores en la Web

1. Número de colores en página:
   • Primera norma es mejor pocos colores mejor que muchos. 
   • Como siguiente norma se puede afirmar que 3 colores en una misma página sería lo mínimo a utilizar.
     • 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. S
     • Color Secundario: es el segundo tono predominante en la página,en mucha menor medida. Normalmente debe 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. debe contrastar mucho con los colores primario y secundario Puede utilizarse el Complementario o el Complementario Escindido del color primario de la página.


2. Relación entre colores:
   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.
   •  Colores Complementarios: Son aquellos que se encuentran opuestos en el círculo de color .os juntos producen un gran contraste destacando mucho uno sobre el otro.
     
     
   • 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.
     
     
     El uso de de un color y sus complementarios adyacentes aporta un alto nivel de contraste, sin llegar al extremo cuando se usa directamente su 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.
     
     
   • 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.
3. El Contraste entre colores:
   Buscando 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.
   
   
   1. 4.1 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.

      Es interesante el contraste de tono entre colores fríos y cálidos. 
      En una página web será más conveniente utilizar colores fríos para marcos, tapices o elementos secundarios y colores calientes para menús, iconos o barras de herramientas que queramos que el usuario siempre tenga presente.
      
      
   2. 4.2 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.
   
   
   3. 4.3 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.
   4. 
      
      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.
   
   
   5. 4.4 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 .
      
      
      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.
   
   
   
   6. 4.5 Combinación de contrastes: Es lo más frecuente, sobre todo cuando se trata de resaltar textos.

      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.

      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.
      
      
4. Los colores y el texto:
   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
   
5. 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.