Come usare
- Inserisci un colore di base approvato, quindi scegli se stai pianificando un'interfaccia utente chiara o scura.
- Scegli un target AA o AAA per impostare il livello di contrasto per l'accento principale.
- Copia le variabili CSS generate nel tuo prototipo o nelle note del token, quindi concludi con Controllo del contrasto sugli esatti abbinamenti finali.
Passa dai controlli a coppia singola alla pianificazione della tavolozza accessibile basata sui ruoli
Questa pagina si trova tra la tavolozza dei colori, il mix di colori CSS e il controllo del contrasto. Risponde a una domanda più ristretta: se un colore di base è già approvato, quali ruoli dell'interfaccia utente iniziali sembrano ancora coerenti e sensibili al contrasto?
:root {
--surface: #ffffff;
--surface-alt: #f4f7fd;
--text: #111827;
--text-muted: #475569;
--accent: #1d4ed8;
--accent-text: #ffffff;
--border-color: #b3c1dd;
}Come scegliere tra le pagine vicine
Utilizzare Tavolozza dei colori quando il lavoro è ancora un'ampia esplorazione visiva attorno a un campione. Utilizzare Armonia dei colori quando la domanda successiva riguarda le relazioni di tonalità. Utilizzare Miscela di colori CSS quando esistono già due colori approvati e il lavoro successivo spedisce un'espressione di mix. Utilizza questa pagina quando viene approvato un colore di base e il lavoro rimanente consiste nell'assegnare ruoli dell'interfaccia utente coerenti tenendo presente il contrasto. Spostati in Esportazione token colore quando tali ruoli sono già accettabili e il passaggio successivo è impacchettarli per il codice. Concludi con Controllo del contrasto una volta bloccate le coppie esatte testo/sfondo.
Domande frequenti
Cosa genera questa pagina?
Genera una tavolozza iniziale basata sui ruoli da un colore di base approvato, inclusi colori di superficie, testo, testo disattivato, accenti, testo in risalto e colori dei bordi per la pianificazione dell'interfaccia utente chiara o scura.
Quando dovrei usarlo al posto del controllo del contrasto?
Utilizza il controllo del contrasto quando sono già stati scelti due colori esatti e hai solo bisogno di un passaggio finale o di un verdetto di fallimento. Utilizza questa pagina in precedenza, quando viene approvato un colore di base ma i ruoli dell'interfaccia utente circostanti necessitano ancora di una tavolozza iniziale basata sull'accessibilità.
Quando dovrei usarlo al posto di Color Palette Generator?
Utilizza il generatore di tavolozze di colori per un'esplorazione visiva più ampia attorno a un campione. Utilizza questa pagina quando il passaggio successivo consiste nell'assegnare ruoli pratici dell'interfaccia utente come superficie, testo, accento e testo dei pulsanti tenendo conto del contrasto.
Cosa è memorizzato nell'URL di condivisione?
L'URL di condivisione memorizza il colore di base, la modalità chiara o scura e se la destinazione è AA o AAA.