Skip to main content

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 gli stessi meccanismi per la gestione dei colori di Bootstrap 5.2.3, dove i colori del tema sono descritti attraverso una variabile Sass nominata $theme-colors.

La principale novità introdotta da Bootstrap Italia è una serie di varianti della tonalità primaria primary basate sullo spazio colore HSB (coincidente con il modello HSV).

Questo permette di avere a disposizione 16 diverse varianti “monocromatiche” (in quanto hue e, in gran parte anche saturation rimangono invariate) che, essendo aggiunte alla lista di $theme-colors, sono disponibili per tutti quei componenti ed utilità che ne fanno uso, come ad esempio .text- e .bg-*.

Puoi trovare maggiori informazioni sulla palette di colori a disposizione alla pagina Colori Custom.

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.