I cinque ruoli di colore
In “Design” e “Colori” trovi “La tua palette di colori”. Ogni colore ha un compito: “Sfondo” è la base dell’intera pagina, “Superficie” tutto ciò che vi sta sopra: schede, riquadri, campi. “Colore del testo” vale per il testo corrente, “Colore di accento” per pulsanti, link e tutto ciò che esegue un’azione. “Testo sui pulsanti” è il colore dell’etichetta sull’accento; se lo lasci vuoto, lo calcoliamo in modo che sia leggibile.
Imposti un colore con un clic sul suo campione oppure digitando sotto il valore esadecimale, per esempio #8A4B2E, e confermando con Invio. Un campione tratteggiato significa: non ancora impostato, decide il modello. La × accanto a un colore impostato lo libera di nuovo, e la piccola i accanto a ogni ruolo lo spiega in una frase.
- Apri “Design” e scegli “Colori”.
- Fai clic sul campione di un ruolo oppure digita il suo valore esadecimale.
- Controlla l’anteprima: il salvataggio avviene da solo.
Combinazioni sulla ruota dei colori
“Esplora combinazioni di colori” apre la ruota dei colori. Il suo punto grande è il “Colore di base”, che è il tuo colore di accento: ciò che scegli sulla ruota viene salvato subito come colore di accento. Trascini il punto con il mouse o con il dito; quando ha il focus funzionano anche i tasti freccia, con il tasto Maiusc a passi più ampi. Il cursore “Luminosità” sotto rende il colore più chiaro o più scuro.
Accanto scegli un’“Armonia”: “Analogo”, “Monocromatico”, “Complementare”, “Complementare diviso”, “Triadico”, “Quadrato”, “Sfumature” o “Proprie”. La “Palette” sotto mostra i colori adatti con il valore esadecimale; “Usa come…” sotto un colore lo assegna a un singolo ruolo.
“Applica al marchio” distribuisce la palette in un colpo solo: la base come accento, più uno sfondo chiaro, una superficie chiara, un colore del testo scuro e un testo dei pulsanti nero o bianco, calcolati per essere leggibili. Dopo puoi modificare ogni ruolo singolarmente.
- In “Colori” espandi “Esplora combinazioni di colori”.
- Trascina il punto grande sul tuo colore principale e scegli un’armonia.
- Fai clic su “Applica al marchio”.
Leggibilità
Sotto la palette, il riquadro “Leggibilità” misura quattro coppie di colori: “Testo su sfondo”, “Testo su superficie”, “Testo sui pulsanti” e “Accento su sfondo”, secondo le WCAG, almeno 4,5:1. Ogni coppia mostra il suo contrasto e un giudizio a parole: “Molto ben leggibile”, “Ben leggibile”, “Al limite — difficile da leggere” o “Non leggibile”. Una coppia in cui uno dei colori non è ancora impostato non viene misurata.
Se una coppia non è leggibile, l’avviso compare su entrambi i colori (“Contrasto insufficiente con: …”) e il riquadro indica la conseguenza per ciascuno strumento. “Sostituito in: …” significa che quello strumento mostra lì un colore leggibile al posto del tuo: sito web, modulo e WordPress usano nero o bianco, il negozio prima il proprio colore. “Resta così in: …” significa che lo strumento mostra esattamente i tuoi colori, anche se sono difficili da leggere.
Sotto compare allora “Così diventa leggibile”: fino a tre palette pronte in cui ogni coppia supera la verifica. Calcoliamo tutte le coppie insieme, così nessuna correzione rovina un’altra coppia: ogni colore diventa solo più chiaro o più scuro e mantiene la sua tinta; il testo sui pulsanti resta il tuo colore oppure diventa nero o bianco. Una piccola anteprima mostra per ogni proposta le quattro coppie, e accanto è indicato come si sposta ciascun colore. “Applica” applica la palette al tuo marchio, “Annulla” ripristina i tuoi colori.
I colori leggibili aiutano tutti: le persone che vedono male e chiunque guardi il telefono alla luce del sole.
Verificare il contrasto in dettaglio
“Verifica il contrasto in dettaglio” esamina da vicino una coppia. In alto scegli la coppia; in grande compare il suo rapporto, per esempio 5,20 : 1. Sotto ci sono primo piano e sfondo, ciascuno con un campione e un cursore “Luminosità”: ciò che modifichi qui modifica il colore del tuo marchio.
La tabella mostra quali livelli raggiunge la coppia: “Testo grande”, “Testo piccolo” e “Grafica e interfaccia”, ciascuno per AA e AAA con “Supera” o “Non supera”. Il testo corrente richiede 4,5:1, i titoli grandi 3:1; per un accento sullo sfondo basta 3:1. Accanto vedi la coppia come piccola pagina con titolo e paragrafo.
Se il contrasto non basta, compaiono “Suggerimenti — stessa tinta, solo più chiara o più scura”: un clic assegna il colore proposto al ruolo. Se con quella tinta non c’è proprio modo, il riquadro ti dice che devi scegliere di nuovo uno dei due colori.
- In “Colori” espandi “Verifica il contrasto in dettaglio”.
- In alto scegli la coppia che non è leggibile.
- Fai clic su un suggerimento o trascina il cursore “Luminosità” finché non compare “Supera”.