Tiempo de lectura: 3 minutos
Shares

Ya os habíamos hablado anteriormente del Material Design, la normativa de diseño creada por Google para los desarrolladores Android, a aplicar en apps y servicios de distintas plataformas. Como un añadido a esta normativa, Google acaba de lanzar Color Tool, una herramienta para ayudar a los diseñadores en términos de color. Color Tool les permite crear y compartir sus propias paletas de colores, aplicarlas a las interfaces de los usuarios de las apps y otros servicios. Veamos más.

Trabajar con los colores en tiempo real con Color Tool

El color es un aspecto básico del diseño. Elegir una paleta cromática correcta es muy importante para transmitir ciertos valores, determinar la utilidad de una aplicación móvil o un sitio web, y hacer legible cualquier texto. Y esto mismo han debido pensar los de Google, que con Color Tool aumentan sus directrices en tema de Material Design, ayudando a diseñadores y desarrolladores en aspectos relacionados con el color.

Como ya hemos visto, con esta nueva herramienta se pueden crear y compartir paletas de colores para posteriormente aplicar en apps y otras plataformas. Pero además, Color Tool permite evaluar si un texto es legible con un fondo de un determinado color, basándose para ello en las Pautas de Accesibilidad de los Contenidos Web.

Cómo utilizar Color Tool

Esta nueva herramienta de Google está disponible gratuitamente en la web material.io/color. En esta web cualquier diseñador o desarrollador web puede jugar con distintas combinaciones de color y ver los resultados aplicados. 

Hagamos una prueba con un color rosa, por ejemplo. El color exacto elegido podemos conocerlo a través de su código HTML, y se nos relaciona con su variante más clara o más oscura. Hemos seleccionado  un color rosa como color principal de diseño, pero la herramienta nos permite elegir también un color secundario y el color de texto, pudiendo así hacer combinaciones variadas. En este caso hemos dejado el color blanco como secundario y el mismo color rosa para el texto. 

Color Tool1

En la siguiente imagen podemos ver tres variantes de cómo se verían nuestras interfaces con los colores seleccionados. En este caso hemos optado por una gama cromática muy armónica, pero podríamos haber hecho combinaciones más contrastadas, más arriesgadas. En este punto juega un papel fundamental el gusto del diseñador o el fin para el que se esté diseñando una aplicación móvil o una web.

Color Tool3

Finalmente, tenemos la opción de revisar la accesibilidad para el contenido web en base a estos colores. Es decir, comprobar si nuestra gama cromática es legible en el fondo elegido. Fijaos en que dependiendo de si el texto es blanco o negro, y si el fondo es más claro o más oscuro, Color Tool nos avisa de si la combinación es legible, o el porcentaje de visibilidad que tiene. Un aspecto en todo caso tan importante, como interesante es que Google lo haya añadido en Material Design, sobre todo teniendo en cuenta que es algo a menudo obviado.

Color Tool2

 

 

Shares