Color

Recursos

Introducció

En pantalla s’utilitzen formats de color diferents dels que se solen utilitzar en el disseny per a altres suports, ja que es treballa amb el color llum i no amb pigments.

Formats de color

Els dos formats més utilitzats són l’RGB i l’hexadecimal (aquest en HTML).

Color RGB

Un color RGB s’especifica pels tres components bàsics del color llum: vermell (Red), verd (Green) i blau (Blue).

Cada paràmetre defineix la intensitat del color de 0 (no intensitat) a 255 (intensitat màxima). Per exemple, un RGB (255,0,0) correspon a un vermell pur, en què no hi ha cap component de verd o blau.

RGB (0,0,0) correspon al negre, mentre que l’RGB (255, 255, 255) correspon al blanc.

Color hexadecimal

El format hexadecimal s’utilitza fonamentalment en entorns web i és suportat per a tots els navegadors.

Igual que l’RGB, també s’especifica pels tres components bàsics del color llum, encara que en aquesta ocasió la codificació és diferent: #RRGGBB.

Cada paràmetre defineix la intensitat del color de 00 (no intensitat) a FF (intensitat màxima). Per exemple, un hexadecimal #FF0000 correspon a un vermell pur, en què no hi ha cap component de verd o blau.

#000000 correspon al negre, mentre que #FFFFFF correspon al blanc.

Dissenyant amb color

Sistemes de color

Un dels primers passos quan plantegem un disseny per a la pantalla, consisteix en definir el sistema de color amb què es treballarà.

Un sistema basat en massa colors pot generar un efecte visual caòtic. En general, definir 2 o 3 colors de base dirigeix el disseny a un efecte simple i ben estructurat.

Sistema monocrom

Es basa en 2 o 3 variacions del mateix color (per exemple, vermell). El resultat sol ser net i elegant, encara que també pot resultar monòton.

Sistema de colors anàlegs

Els colors de base del cercle cromàtic estan a la vora, encara que no són variacions del mateix. Per exemple, una combinació de verd i blau ens donaria un sistema de color anàleg.

En aquest cas, es determina un color dominant, i els altres són tractats com a secundaris.

Sistema de colors complementaris

Els colors de base del cercle cromàtic estan en posicions oposades: per exemple, vermell i verd o blau i taronja.

Aquest sistema genera forts contrastos visuals; perquè el resultat visual no resulti caòtic, també en aquest cas es determina un color dominant, i l’altre s’utilitza per a destacar punts d’atenció.

Sistema personalitzat

A més d’articular colors segons la seva posició en el cercle cromàtic, podem generar els nostres propis sistemes de color, basant-nos en altres criteris o en l’estil d’una marca determinada.

Contrast

Contrast i focus d’atenció

El contrast de color es pot utilitzar per a atreure l’atenció de l’usuari cap a determinats elements de la pantalla. Per exemple, és un recurs molt utilitzat per a destacar clarament botons call-to-action (aquells que esperem que l’usuari cliqui quan accedeix a la pàgina).

Així mateix, el contrast es pot utilitzar per a destacar avisos o alertes.

Contrast de text

Per a garantir la llegibilitat, el text ha de mantenir un cert nivell de contrast respecte del fons. El contrast s’expressa mitjançant la ràtio de lluminositat dels dos colors comparats (1:1). Per exemple, una ràtio de 4:1 implica que el fons (4) té un nivell de lluminositat 4 vegades més gran que el text (1).

Segons les pautes d’accessibilitat WCAG 2.0, la ràtio de contrast hauria de ser la següent:

Per a text o icones en general, la ràtio mínima és 4,5:1.
Per a text de gran grandària, la ràtio mínima és 3:1.
Per a text o icones purament decoratives –que no contenen informació rellevant– o per a logotips, no hi ha requisits de contrast.

Hi ha diverses eines online que permeten comprovar si el nivell de contrast entre el color del text i el fons del nostre disseny és l’adequat. Per exemple:

Ceguesa al color

Aproximadament un 8% dels homes i un 0,5% de les dones tenen algun tipus de ceguesa al color, és a dir, que no poden distingir certes combinacions de colors. La combinació de vermell i verd sol ser la més problemàtica, encara que n’hi ha altres.

Si la informació visual es basa solament en codis de color, alguns usuaris no podran interpretar-la adequadament. Per tant, hauríem d’evitar utilitzar solament el color per a distingir continguts i reforçar-ho amb altres elements, com ara icones, text, trames…

Referències

Babich, N. «The underestimated power of color in mobile app design». Disponible a: <https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/>. [Data de consulta: 25 de gener de 2021].

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