Colori
Utilizziamo un sistema di colori che guidi le persone verso le informazioni importanti, rendendo i contenuti accessibili a tutti.
FondamentiMetadati e link per approfondire
Principi
I principi che guidano l'uso dei colori
Rispetta i ruoli
Ciascun colore della palette ha un ruolo e funzione specifica. Ad esempio, il colore primario è associato ad elementi di azione mentre un colore neutro è riservato ad elementi di supporto o sfondi. Il rispetto di questi ruoli assicura coerenza visiva e chiarezza nella fruizione dei contenuti.
Applica con parsimonia
I colori contribuiscono alla creazione di una gerarchia visiva che mette in evidenza ciò che conta davvero. Non sono elementi decorativi, ma strumenti essenziali per semplificare l'esperienza visiva.
Garantisci un contrasto minimo
Assicurati che il rapporto di contrasto del testo e degli elementi interattivi nel il tuo servizio soddisfa il livello AA delle Linee guida per l'accessibilità dei contenuti Web (WCAG 2.1).
Palette
La palette prevede quattro tipologie di colori: primario, accento, neutri e di sistema.
Colore primario
Anteprima | HEX | HSL | Contrasto su sfondo bianco |
---|---|---|---|
#0066cc | 210, 72%, 57% | 5.56:1 |
Varianti monocromatiche
Anteprima | HEX | HSL | Contrasto su sfondo bianco |
---|---|---|---|
#f2f7fc | 210, 62%, 97% | 1.07:1 | |
#bfdfff | 210, 100%, 87% | 1.38:1 | |
#94c4f5 | 210, 83%, 77% | 1.83:1 | |
#6aaaeb | 210, 76%, 67% | 2.45:1 | |
#4392E0 | 210, 72%, 57% | 3.26:1 | |
#207ad5 | 210, 74%, 48% | 4.31:1 | |
#0066cc | 210, 100%, 40% | 5.56:1 | |
#004d99 | 210, 74%, 30% | 8.32:1 | |
#004080 | 210, 100%, 25% | 10.26:1 | |
#003366 | 210, 100%, 20% | 10.26:1 |