Tendencias en paletas de color y selección de contraste

La importancia del color

Según Aarish Sherin, “En un mundo en que las primeras impresiones se forman en nada más que una vigésima parte de segundo, el color puede ayudar al diseñador a captar la atención del espectador y a comunicar información en un entorno visual saturado. El color puede también ayudar al espectador a realizar rápidamente una asociación correcta o a tener la reacción adecuada ante la marca de un producto o un servicio” (Fundamentos del Color, pág. 10).

Por tanto, la selección de las paletas de color en un proceso de diseño es primordial. En cualquier proyecto riguroso no debemos olvidar que hay elementos como la forma, el color, la tipografía, la composición o el material que están en conjunto por encima del artefacto final. La dedicación al estudio preliminar de estos puntos es básico para asegurar el éxito de cualquier propuesta creativa.

Adobe Color Wheel, ¿qué es?

Adobe Color es la web de Adobe que se centra en el uso del color. Basada en un círculo cromático, se trata de una aplicación en donde podremos trabajar con él: bien para realizar nuestra propia selección cromática o bien para elegir entre otras paletas de color que son tendencia o se han creado por otros usuarios a modo colaborativo.

Seleccionar paletas tendencia

Esta sección nos permitirá descubrir paletas de color que son tendencia dentro de las comunidades creativas de Behance y Adobe Stock. Bien mediante selección visual o mediante búsqueda, el site dispone de ciertos apartados para bucear entre selecciones dentro de la moda, naturaleza, viajes, diseño, arquitectura o comida. ¿Que es ahora tendencia?

Crear nuestras paletas de color

Además de explorar gamas cromáticas, Adobe Color nos permite crear manualmente las nuestras propias. La selección de nuestros cinco colores puede realizarse de forma individual y selectiva, pero también usando reglas que se han demostrado ser efectivas: por ejemplo, los colores complementarios, la triada o los que se encuentran bajo una misma tonalidad son una apuesta segura en cerebros propios y ajenos.

También es muy interesante la extracción de una paleta de color o degradado de una imagen; para ellos simplemente has de ir a “Extraer Tema” o “Extraer Degradado” respectivamente en el menú superior. Por descontado, la plataforma nos permite trabajar en RGB, HSB y LAB y el código de color en HTML siempre estará visible para que lo puedas usar con facilidad.

Contraste de color y accesibilidad

Hasta ahora, para comprobar un contraste de colores era adecuado, debíamos recurrir a páginas webs como Contrast Ratio, Color Contrast Checker o WebAIM. Adobe incorpora recientemente esta funcionalidad bajo su sección de “Accesibilidad”. Habitualmente lo que se suele medir es el ratio de contraste (con un máximo de 21:1)  de los colores elegidos para que cumplan con las buenas prácticas en Web Content Accessibility Guidelines. Suele aplicarse a la relación existente entre el fondo y el texto u objetos gráficos y se rigen por:

• Texto Pequeño nivel AA: ratio 4.5:1 o superior.
• Texto Pequeño nivel AAA: ratio 7:1 o superior.
• Texto Grande nivel AA: ratio 3:1 o superior.
• Texto Grande nivel AAA: ratio 4.5:1 o superior.
• Objetos gráficos y componentes UI nivel AA: ratio 3:1 o superior.

Una relación de contraste de 3:1 es el nivel mínimo recomendado por la ISO-9241-3 y ANSI-HFES-100-1988 para texto y visión estándar. La proporción de 4.5:1 es usada para tener en cuenta la pérdida de contraste que resulta de una agudeza visual moderadamente baja, deficiencias cromáticas congénitas o adquiridas, o la pérdida de sensibilidad al contraste que normalmente acompaña al envejecimiento.

Por su lado, el texto grande se define como un texto con un tamaño mínimo de 14 puntos o 18px en negrita o 18 puntos (normalmente 24px) en otros estilos.

Contrast Ratio en otras aplicaciones

Como hemos adelantado Contrast Ratio,  Contrast Checker o WebAIM son otras plataformas en donde comprobar unos contrastes correctos. Además de las funcionalidades en cualquiera de ellas, Adobe se adelanta e incluye alguna adicional como la posibilidad de limitar a aquellos los colores seguros para daltónicos. ¡Bravo!

Color Contrast con Google Chrome

Para finalizar, si te dedicas al desarrollo de páginas web esta utilidad te será de gran ayuda. Seguro que estás muy acostumbrado a usar el inspector de Google Chrome o Firefox dentro de las herramientas de desarrollador que los navegadores ofrecen.

En el caso del primero, además de las funciones de debug, podrás comprobar cual es el ratio de contraste entre dos elementos de la web, especialmente entre los textos y el fondo. Lo único que debes hacer es pinchar sobre uno de los colores incluidos en Elements > Style. Si hay información de contraste la obtendremos inmediatamente, diferenciando entre los niveles AA y AAA del las Web Content Accessibility Guidelines (WCAG).

Ponle color a tu vida y pregúntanos lo que necesites.