Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Colori

Colori

Una serie di classi di utilità per applicare colori a testi e sfondi.

Accessibilità

Il colore è uno degli strumenti principali per la trasmissione delle informazioni, ma non dimenticare mai di affiancare all’uso del colore altri mezzi più espliciti.

Bootstrap Italia eredita le classi di utilità .text-* e .bg-* di Bootstrap 5.2.3, basate sulla mappa $theme-colors, e le affianca a un sistema di CSS custom properties semantiche con prefisso --bsi- che governano i colori di tutti i componenti.

Le variabili CSS sono definite su :root e derivano dal pacchetto design-tokens-italia, che contiene i valori in formato JSON, CSS e SCSS per i design token del Design System Italia.

Per informazioni su come personalizzare i colori del tema sovrascrivendo le variabili CSS — senza ricompilare i sorgenti SCSS — consulta la pagina Personalizzazione dei colori.

Colore del testo

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-muted

.text-white

1
2
3
4
5
6
7
8
9

<p class="p-3 mb-2 text-primary">.text-primary</p>
<p class="p-3 mb-2 text-secondary">.text-secondary</p>
<p class="p-3 mb-2 text-success">.text-success</p>
<p class="p-3 mb-2 text-danger">.text-danger</p>
<p class="p-3 mb-2 text-warning">.text-warning</p>

<p class="p-3 mb-2 text-muted">.text-muted</p>

<p class="p-3 mb-2 text-white bg-dark">.text-white</p>

Colore di sfondo

Allo stesso modo di quanto avviene per il testo, le classi bg-* permettono di colorare lo sfondo di un elemento; le classi per gli sfondi non hanno alcun impatto sulla proprietà color, per cui in alcuni casi sarà necessario affiancarle alle classi .text-*.

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-white

1
2
3
4
5
6
7
8
9
10
11

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>

<div class="p-3 mb-2 bg-success text-white">.bg-success</div>

<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>

<div class="p-3 mb-2 bg-warning text-white">.bg-warning</div>

<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Colore di sfondo con gradiente

Bootstrap Italia eredita da Bootstrap la possibilità di avere sfondi con gradiente. Tale funzionalità non è però attiva, e va esplicitamente impostata attraverso la variabile SASS $enable-gradients, e ricompilando i file sorgente.

Si possono trovare maggiori informazioni a riguardo sul sito di Bootstrap.

Trasmettere significato alle tecnologie assistive

L’uso del colore per aggiungere un significato fornisce solo un’indicazione visiva, che non sarà trasmesso agli utenti di tecnologie assistive – come gli screen reader. Assicurati che le informazioni denotate dal colore siano rese disponibili anche dal contenuto stesso (es.: il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la classe .visually-hidden.