Il selettore colori è una funzione dell'editor che consente di gestire la combinazione di colori di testo, sfondo, sovrapposizioni e altro ancora. È possibile scegliere un colore dalla tavolozza, inserire un valore HEX o RGB o persino creare una sfumatura personalizzata. La funzione "Colori recenti" aiuta a mantenere la coerenza della combinazione di colori e a preservare un aspetto professionale del sito.
Quando si utilizza lo strumento di selezione del colore, sono disponibili le seguenti opzioni:
Stile di tessuto
Prima di scegliere la combinazione di colori, decidi dove vuoi utilizzare un colore unico o una sfumatura .
Se si utilizza l' opzione a colore singolo , è possibile scegliere un colore dalla scheda "Colori recenti" oppure passare a "Scegli un altro colore".
Lo sfondo sfumato sarà un'opzione disponibile per gli sfondi di righe, colonne e widget, nonché per le sovrapposizioni di immagini. Per applicare una sfumatura, assicurati di:
- Scegli 2 colori per i punti di arresto della sfumatura. Puoi invertire i colori per regolare il posizionamento del punto di arresto.
- Scegli la direzione del gradiente.
- L'opzione centrale genererà un gradiente radiale.
- Le opzioni laterali creeranno una sfumatura lineare.
Nota:
Non è possibile salvare le sfumature in Colori del tema .
Colori globali
I colori globali consentono di definire una tavolozza di colori e di collegare i singoli colori a uno o più widget con impostazioni di colore. Il colore di qualsiasi elemento collegato ai colori globali verrà aggiornato automaticamente quando il colore collegato viene modificato nelle impostazioni dei colori globali. Questo permette di apportare rapidamente modifiche ai colori, riducendo i tempi di progettazione e garantendo la coerenza dello stile del sito su tutte le pagine. Per informazioni su come configurare i colori globali, consulta la sezione Colori del tema.
Colori salvati
Salva i colori che usi frequentemente sul tuo sito aggiungendoli all'elenco "Colori salvati" nel selettore colori. Per aggiungere un colore ai colori salvati, fai clic sulla scheda " Colori salvati" nel selettore colori e poi su "+". Per rimuovere un colore dall'elenco dei colori salvati, fai clic con il pulsante destro del mouse sul colore e seleziona "Rimuovi".
Nota:
È possibile salvare fino a 48 colori e sfumature nell'elenco dei colori salvati.
Colori recenti
Quando si seleziona un colore, il menu "Colori recenti" mostra un'anteprima dei colori utilizzati di recente sul sito. Questo permette di scegliere rapidamente i colori già presenti sul sito.
Scegli un altro colore
Seleziona la tonalità di un colore utilizzando la tavolozza dei colori a destra o il pannello dei colori. In alternativa, puoi inserire il valore HEX o RGB del colore desiderato nella casella di testo sotto la sfumatura di colore verticale.
Per riprodurre perfettamente un colore da qualsiasi punto del tuo sito (immagini, testi e così via), fai clic sullo strumento contagocce e seleziona il colore desiderato dal tuo sito. Non c'è bisogno di perdere tempo a cercare di capire il nome o il valore esatto di un colore.
Opacità
Il cursore dell'opacità determina la trasparenza di un elemento. Tieni presente che, riducendo l'opacità di un elemento, ciò che si trova dietro di esso (immagine di sfondo o colore) inizierà a fondersi con l'elemento stesso.
Strumento di verifica del contrasto per i colori del testo
Il controllo del contrasto per i colori del testo contribuisce a migliorare l'accessibilità dei siti indicando se il contrasto tra il testo e lo sfondo soddisfa lo standard AA o AAA*. Il controllo del contrasto viene visualizzato nel selettore colori ogni volta che quest'ultimo viene utilizzato per il testo.
Di seguito sono riportati i criteri che determinano il raggiungimento dello standard AA o AAA:
| 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 |
*Negli standard di accessibilità, "AA" e "AAA" rappresentano diversi livelli di requisiti di contrasto cromatico.
- Il livello AA significa che i colori hanno un contrasto sufficiente per essere leggibili, ma potrebbero comunque presentare problemi per alcuni utenti.
- Il livello AAA indica un contrasto elevato che dovrebbe garantire 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 nelle seguenti circostanze:
- Il testo selezionato presenta più colori. Ad esempio, se alcune parole del testo sono blu e altre sono rosa.
- Il testo è su uno sfondo sfumato.
- Il testo è su uno sfondo immagine.
Considerazioni
La sfumatura non è disponibile per gli elementi di testo, quindi non la vedrai nel selettore colori per gli elementi di testo nell'editor di progettazione dei widget nella scheda "Progettazione globale".
Quando si lavora con gli sfondi, il passaggio tra "Colore" e "Immagine" annulla le impostazioni dell'opzione precedente. Ad esempio, se si stava utilizzando un colore e si cambia l'impostazione in "Immagine", tutte le impostazioni di colore o sfumatura verranno rimosse.
Le sfumature sovrascrivono lo sfondo dei singoli pulsanti. Per ripristinare lo sfondo originale, seleziona nuovamente lo sfondo desiderato per ciascun pulsante.
