Uso del color en las primeras fases de un diseño web

Cada maestrillo tiene su librillo y en este artículo quiero compartir mi técnica para la elección de colores en esas primeras fases en el desarrollo del layout de un diseño.

Para mi estos estadios iniciales son esenciales, los mas complicados y hasta críticos ya que de ello dependera el progreso del aspecto visual del proyecto. No acertar adecuadamente a la hora de elegir colores y como utilizarlos puede resultar en una perdida de tiempo considerable una vez ya el diseño este avanzado.

Crear una paleta de colores.

Vamos primero a pensar en el contexto del contenido de la web que estamos realizando. Supongamos por ejemplo que nuestro diseño está relacionado con el mundo de la construcción, en primer lugar escogeria una fotografía en la que se vean diferentes elementos relacionados con el contexto del contenido, por ejemplo esta:

El siguiente paso sería abrirla en photoshop (o tu programa de edición fotográfica preferido) y aplicarle una pixelación considerable. En photoshop lo haríamos aplicando el Filtro Pixelizar, escogiendo la opción Cristalizar.

Alternativamente tenemos también el Filtro Textura en su opción Vidriera:

Quedandonos con la primera opción obtenemos el siguiente resultado:

Hecho esto ya disponemos de multitud de pixeles que mediante la herramienta cuentagotas podremos ir seleccionando y anotando su código de color.

Con esto podremos obtener una paleta de colores, a elección de cada cual el número de muestras a seleccionar.  Aconsejo tomar un bueno número de ellos y procurando elegir colores que contrasten entre ellos.

El siguiente paso es estudiar como esos colores pueden influir en el contraste, brillo y consistencia del diseño. Para ello tenemos una estupenda herramienta que se basa en los estandares de accesibilidad definidos por la WCAG.

WCAG 2.0 nos define el ratio de luminancia y WCAG 1.0 la diferencia entre brillo y control. Si seguimos estas lineas definidas por la W3.org obtendremos combinaciones con el suficiente contraste de luminancia entre texto y color.

El punto 1.4.3 nos habla del contraste mínimo: La presentación visual de texto e imágenes de texto tiene que tener un ratio de contraste de al menos 4.5:1, excepto para el ‘nivel AA’, Texto de gran tamaño, en este caso el contraste debe ser de al menos 3:1.

El punto 1.4.6 nos habla del contraste sugerido: En este caso la presentación debe tener un ratio de al menos 7:1 exceptuando el caso del ‘nivel AAA’, Texto de gran tamaño con el cual el ratio debe ser de al menos 4.5:1.

Nuestra herramienta es una aplicación air llamada Contrast-A y nos ayuda a buscar combinaciones de colores accesibles, puedes descargarla y probarla.

3 Comentarios

Enviar un comentario

Nombre (required) :
Email (required) :
Web Site :
Comentario :

Notifícarme del seguimiento de comentarios via e-mail