HomeCasa Palette per la modalità scura accessibile con verifica del contrasto WCAG
Progetta una palette per la modalità scura con token semantici partendo dai colori del brand, con tabella di contrasto WCAG per ogni coppia, correzioni e codice CSS pronto. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.
Avanzato · Testo · In attesa di revisione editoriale
Prompt
Agisci come designer di design system specializzato in colore e accessibilità (WCAG 2.2).
Contesto:
- Colori del brand (hex): {{colori_brand}}
- Prodotto: {{prodotto}}
- Superficie di base della modalità scura: {{superficie}}
- Livello di conformità richiesto: {{livello_wcag}}
- Componenti da coprire: {{componenti}}
Consegne:
1. Principi della modalità scura per questo prodotto: perché evitare il nero puro tranne sugli schermi OLED, come esprimere l'elevazione con superfici più chiare e come desaturare i colori del brand perché non vibrino.
2. Tabella di token semantici con valore chiaro e scuro: sfondo, superfici 1-3, testo principale, secondario e disattivato, bordi, primario e relativi stati (hover, pressed), anello di focus, successo, avviso, errore, informazione e i relativi colori «on» (testo sopra quel colore).
3. Tabella di contrasto per coppia (testo su sfondo, testo su superfici, testo su primario, bordi e focus su sfondo): rapporto calcolato con la formula della luminanza relativa WCAG 2.x, requisito applicabile (4,5:1 testo normale, 3:1 testo grande e componenti non testuali; 7:1 e 4,5:1 per AAA) e risultato.
4. Per ogni coppia non conforme, un valore alternativo che superi la verifica mantenendo l'intenzione del brand.
5. Colori per grafici (4-6 serie) distinguibili su sfondo scuro e non basati solo sulla tinta.
6. Implementazione: variabili CSS, prefers-color-scheme e interruttore manuale con preferenza salvata.
Vincoli:
- Mostra la formula e i valori intermedi. Indica chiaramente che i rapporti vanno verificati con uno strumento di contrasto prima dell'approvazione.
- Non trasmettere mai informazioni solo con il colore; proponi icone o testo di supporto.
- Se mancano colori chiave (ad esempio il colore di errore del brand), chiedimeli; non presentare valori inventati come «ufficiali».
Formato: tabelle di token e contrasto, elenco delle correzioni e blocco di codice CSS.Come usarlo
- Incolla i colori del brand in esadecimale. 2. Rivedi la tabella di contrasto e verifica ogni rapporto con uno strumento dedicato. 3. Copia le variabili CSS nel progetto e prova l’interfaccia reale in modalità scura.
Esempio d'uso
Colori: #1E5EFF primario, #FF7A00 accento · Prodotto: app bancaria · Superficie: grigio bluastro scuro · Livello: AA.
Esempio di risultato
Contrasto sulla superficie scura #141B2B
Formula WCAG 2.x: rapporto = (L1 + 0,05) / (L2 + 0,05), con L = 0,2126 R + 0,7152 G + 0,0722 B dopo aver linearizzato ogni canale. Luminanza della superficie: L ≈ 0,0111.
| Coppia | L del colore | Rapporto | Requisito AA | Esito |
|---|---|---|---|---|
Testo principale #E6EAF2 | 0,8208 | 14,3:1 | 4,5:1 | Supera |
Testo secondario #A9B3C6 | 0,4475 | 8,1:1 | 4,5:1 | Supera |
Primario #1E5EFF come testo | 0,1550 | 3,4:1 | 4,5:1 | Non supera |
Primario corretto #7FA2FF | 0,3757 | 7,0:1 | 4,5:1 | Supera |
Successo #12B76A | 0,3504 | 6,6:1 | 4,5:1 | Supera |
Testo bianco su pulsante #1E5EFF | — | 5,1:1 | 4,5:1 | Supera |
Correzione: usa #7FA2FF per link e testo di brand in modalità scura; tieni #1E5EFF solo come sfondo dei pulsanti con testo bianco. Verifica ogni rapporto con un contrast checker prima dell'approvazione.
:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
}
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }…
Dati chiave
- Categoria
- Design UI/UX · Accessibilità
- Tipo di output
- Testo
- Livello
- Avanzato
- Pensato per
- ChatGPT, Claude, Gemini e Microsoft Copilot
- Verificato in
- In attesa di verifica editoriale
- Variabili
- Colori del brand (hex), Prodotto, Superficie di base, Livello WCAG e Componenti
- Lingua
- Italiano
- Prezzo
- Gratuito, senza registrazione
- Aggiornato
- 07/11/2026
Domande frequenti
Posso fidarmi dei rapporti di contrasto calcolati dall’IA?
Usali come bozza. I modelli linguistici possono sbagliare i calcoli, quindi verifica ogni coppia con uno strumento di contrasto prima del rilascio.
Perché non usare il nero puro come sfondo?
Il testo bianco su nero puro può creare aloni e affaticare la vista, e rende difficile mostrare l’elevazione. Un grigio molto scuro di solito funziona meglio; il nero puro ha senso soprattutto per risparmiare energia sugli OLED.
A cosa serve questo prompt?
Progetta una palette per la modalità scura con token semantici partendo dai colori del brand, con tabella di contrasto WCAG per ogni coppia, correzioni e codice CSS pronto.
Con quali strumenti di IA funziona?
È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.
Come personalizzo il prompt?
Clicca su «Personalizza» e compila le variabili (Colori del brand (hex), Prodotto, Superficie di base, Livello WCAG e Componenti). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.
Serve esperienza per usarlo?
È di livello avanzato: è pensato per persone con esperienza nell'argomento, in grado di valutare e regolare il risultato.
Questo prompt è gratuito?
Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.
Posso fidarmi dell'output dell'IA?
Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.