Utilizza il selettore colori per gestire la combinazione di colori di testo, sfondi, sovrapposizioni e altro ancora. Puoi selezionare i colori da una tavolozza, inserire valori HEX o RGB oppure creare sfumature personalizzate. La funzione "Colori recenti" ti aiuta a mantenere un aspetto coerente e professionale in tutto il sito.
Selezione di uno stile di colore
Prima di scegliere un colore, decidi se l'elemento deve utilizzare un colore unico o una sfumatura.
-
Monocolore
Se si utilizza un solo colore, selezionarlo dalla scheda "Colori recenti" oppure scegliere "Scegli un altro colore".
-
Sfumatura
Sono disponibili sfumature per gli sfondi di righe, colonne e widget, nonché per le sovrapposizioni di immagini. Per applicare una sfumatura, assicurati di:
- Seleziona due colori per i punti di controllo della sfumatura. Puoi invertire i colori per regolare la posizione dei punti di controllo.
- Scegli la direzione del gradiente:
- L'opzione centrale genera un gradiente radiale.
- Le opzioni laterali creano un gradiente lineare.
Nota:
Le sfumature non possono essere salvate in Colori del tema .
Gestione dei colori globali
I colori globali consentono di definire una tavolozza di colori primaria e di collegarli ai widget. Quando si aggiorna un colore globale, tutti gli elementi collegati si aggiornano automaticamente. Questo riduce i tempi di progettazione e garantisce la coerenza dello stile su tutte le pagine. Per informazioni su come configurarli, consultare il nostro articolo sui colori del tema.
Salvataggio e utilizzo dei colori
Colori salvati
Salva i colori e le sfumature che usi più frequentemente nell'elenco "Colori salvati" per accedervi facilmente. Puoi salvare fino a 48 colori e sfumature nell'elenco dei colori salvati.
- Aggiungi un colore: fai clic sulla scheda Colori salvati nel selettore colori e fai clic su + .
- Per rimuovere un colore: fai clic con il pulsante destro del mouse sul colore e seleziona Rimuovi .
Colori recenti
Il menu "Colori recenti" mostra un campione dei colori utilizzati di recente sul tuo sito, permettendoti di riapplicare rapidamente le tonalità esistenti.
Scegli un altro colore
Seleziona una tonalità utilizzando la tavolozza dei colori o il pannello dei colori. In alternativa, inserisci un valore HEX o RGB nella casella di testo.
Per riprodurre perfettamente un colore da un elemento esistente del sito, fai clic sull'icona del contagocce e seleziona il colore desiderato dalla pagina.
Regola l'opacità
Utilizza il cursore dell'opacità per determinare la trasparenza di un elemento. Riducendo l'opacità, il colore di sfondo o l'immagine dietro l'elemento si fonderà con esso.
Verifica del contrasto del testo per l'accessibilità
Il controllo del contrasto migliora l'accessibilità del sito indicando se il contrasto tra il testo e lo sfondo soddisfa gli standard AA o AAA. Questo strumento viene visualizzato automaticamente quando si utilizza il selettore colori per gli elementi di testo.
I seguenti criteri determinano i livelli di accessibilità:
| Tipo di testo | Standard* | dimensione del carattere | Rapporto di contrasto minimo |
|---|---|---|---|
| Testo normale | AAA | Meno di 18 punti | 7:1 |
| Testo grande | AAA | 18pt o 14pt | 4,5:1 |
| Testo normale | AA | Meno di 18 punti | 4,5:1 |
| Testo grande | AA | 18pt in grassetto o 24pt e oltre | 3:1 |
- Livello AA: I colori hanno un contrasto sufficiente per essere leggibili per la maggior parte degli utenti, ma potrebbero comunque presentare problemi per alcuni.
- Livello AAA: Contrasto elevato che garantisce la leggibilità per la stragrande maggioranza degli utenti.
Di seguito è riportato un esempio del verificatore di contrasto cromatico che indica che il contrasto tra testo e sfondo soddisfa lo standard AAA:
Il controllo del contrasto è disabilitato nei seguenti casi:
- Il testo selezionato contiene più colori.
- Il testo è posizionato su uno sfondo sfumato.
- Il testo è posizionato su uno sfondo immagine.
Considerazioni
- Le sfumature non sono disponibili per il testo. Non troverai questa opzione nel selettore colori per gli elementi di testo nella scheda "Progettazione globale" o negli editor dei widget.
- Quando si lavora con gli sfondi, il passaggio tra "Colore" e "Immagine" ripristina la selezione precedente. Ad esempio, passando da un colore a un'immagine, vengono rimosse le impostazioni di colore o sfumatura.
- Le sfumature sovrascrivono lo sfondo dei singoli pulsanti. Per ripristinare l'effetto originale, riseleziona lo sfondo per i singoli pulsanti.
