Enllaços i interacció
Els colors d’interacció s’han d’utilitzar per diferenciar accions i estats vinculats a la navegació, especialment els enllaços i l’estat de focus. Això contribueix a reforçar la claredat funcional i l’accessibilitat del lloc web.
Colors de la paleta d'interacció
Mediterrània
#2258c3
hsl(220, 70%, 45%)
rgb(34, 88, 195)
(--color-enllac)
Color dels enllaços.
Atlàntic
#0f388a
hsl(220, 80%, 30%)
rgb(15, 56, 138)
(--color-enllac-b)
Color de ressalt dels enllaços (:hover).
Pirineus
#9fbbf4
hsl(220, 80%, 79%)
rgb(163, 190, 245)
(--color-enllac-c)
Color dels enllaços sobre fons negre o molt fosc.
Ginesta
#ffea61
hsl(52, 100%, 69%)
rgb(255, 234, 97)
(--color-focus)
Color de fons de l’estat seleccionat (:focus) per a la majoria d’elements interactius, com ara enllaços i botons. Té una alta visibilitat per facilitar la navegació amb teclat.
Allioli
#fff5b3
hsl(52, 100%, 85%)
rgb(255, 245, 179)
(--color-focus)
Variant suau del color Ginesta, recomanada per l’estat seleccionat (:focus) d’elements interactius molt grans (per exemple, àrees de text) o que no requereixin tant de contrast.
Usos correctes i incorrectes
Utilitzem el blau Mediterrània per distingir enllaços del text que els envolta. Quan el color de fons és fosc, utilitzem el blau Pirineus. Per exemple:
Quan un llistat d’enllaços o un menú de navegació està clarament separat del cos de text —bé sigui pel seu disseny, la posició, la mida o per l’acompanyament d’icones—, i per tant els enllaços són ràpidament identificables com a elements interactius, no és estrictament necessari mostrar-los en color blau:
L’estat seleccionat o de focus és imprescindible per garantir l’accessibilitat, especialment per a persones que utilitzen el teclat per navegar.
S’ha d’utilitzar els groc Ginesta i Allioli per senyalitzar l’estat de focus d’elements interactius, com ara enllaços, botons o camps de formulari.
