Color

Recursos

Introducción

En pantalla se utilizan formatos de color diferentes de los que suelen utilizarse en diseño para otros soportes, puesto que se trabaja con color luz y no con pigmentos.

Formatos de color

Los dos formatos más utilizados son RGB y hexadecimal (este en HTML).

Color RGB

Un color RGB se especifica por los tres componentes básicos del color luz: rojo (red), verde (green) y azul (blue).

Cada parámetro define la intensidad del color de 0 (no intensidad) a 255 (máxima intensidad). Por ejemplo, un RGB (255,0,0) corresponde a un rojo puro, en el que no hay ningún componente de verde o azul.

RGB (0,0,0) corresponde a negro, mientras que RGB (255, 255, 255) corresponde a blanco.

Color hexadecimal

El formato hexadecimal se utiliza fundamentalmente en entorno web, y es soportado por todos los navegadores.

Al igual que el RGB, se especifica también por los tres componentes básicos del color luz, aunque en esta ocasión la codificación es diferente: #RRGGBB.

Cada parámetro define la intensidad del color de 00 (no intensidad) a FF (máxima intensidad). Por ejemplo, un hexadecimal #FF0000 corresponde a un rojo puro, en el que no hay ningún componente de verde o azul.

#000000 corresponde a negro, mientras que #FFFFFF corresponde a blanco.

Diseñando con color

Sistemas de color

Uno de los primeros pasos al plantear un diseño para pantalla consiste en definir el sistema de color con el que se trabajará.

Un sistema basado en demasiados colores puede generar un efecto visual caótico. En general, definir 2 o 3 colores de base dirige el diseño a un efecto simple y bien estructurado.

Sistema monocromo

Se basa en 2 o 3 variaciones del mismo color (por ejemplo, rojo). El resultado suele ser limpio y elegante, aunque también puede resultar monótono.

Sistema de colores análogos

Los colores de base se encuentran próximos en el círculo cromático, aunque no son variaciones del mismo. Por ejemplo, una combinación de verde y azul nos daría un sistema de color análogo.

En este caso, se determina un color dominante, y los otros son tratados como secundarios.

Sistema de colores complementarios

Los colores de base se encuentran en posiciones opuestas del círculo cromático: por ejemplo, rojo y verde o azul y naranja.

Este sistema genera fuertes contrastes visuales; para que el resultado visual no resulte caótico, también en este caso se determina un color dominante, y el otro se utiliza para destacar puntos de atención.

Sistema personalizado

Además de articular colores según su posición en el círculo cromático, podemos generar nuestros propios sistemas de color, basándonos en otros criterios o en el estilo de una marca determinada.

Contraste

Contraste y focos de atención

El contraste de color se puede utilizar para atraer la atención del usuario hacia determinados elementos de pantalla. Por ejemplo, es un recurso muy utilizado para destacar claramente botones call-to-action (aquellos que esperamos que el usuario clique cuando accede a la página).

El contraste puede utilizarse asimismo para destacar avisos o alertas.

Contraste de texto

Para garantizar la legibilidad, el texto tiene que mantener cierto nivel de contraste respecto el fondo. El contraste se expresa mediante el ratio de luminosidad de los dos colores comparados (1:1). Por ejemplo, un ratio de 4:1 implica que el fondo (4) tiene un nivel de luminosidad 4 veces mayor que el texto (1).

Según las pautas de accesibilidad WCAG 2.0, el ratio de contraste debería ser el siguiente:

Para texto o iconos en general, el ratio mínimo es 4,5:1.
Para texto de gran tamaño, el ratio mínimo es 3:1.
Para texto, o iconos puramente decorativos –que no contienen información relevante–, o para logotipos, no existen requisitos de contraste.

Existen varias herramientas en línea que permiten comprobar si el nivel de contraste entre el color de texto y el fondo en nuestro diseño es adecuado. Por ejemplo:

Ceguera al color

Aproximadamente un 8 % de los hombres y un 0,5 % de las mujeres tienen algún tipo de ceguera al color, es decir, que no pueden distinguir ciertas combinaciones de color. La combinación de rojo y verde suele ser la más problemática, aunque existen otras.

Si la información visual se basa solamente en códigos de color, algunos usuarios no podrán interpretarla adecuadamente. Por lo tanto, deberíamos evitar utilizar solamente el color para distinguir contenidos y reforzarlo con otros elementos, como iconos, texto, tramas…

Referencias

Babich, N. «The underestimated power of color in mobile app design» [en línea]. <https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/>. [Fecha de consulta: 25 de enero de 2021].

Monjo, T. Disseny d’interfícies multimèdia. Barcelona: FUOC.