Design system
Palette UI: come misurarla invece di sceglierla a occhio
Una palette non è un insieme di colori: è una mappatura di ruoli con soglie di contrasto. Ecco come verificarla in luce e buio, prima che lo faccia un audit.
In sintesi
- Definisci ruoli, non colori: canvas, superficie, testo, testo secondario, bordo, accent.
- Il testo normale richiede 4.5:1; il testo grande e i bordi di controllo 3:1.
- Il test che salta più spesso è il testo secondario su superficie, non il titolo.
Una palette si valuta con due domande: quale ruolo ha questo colore e quale contrasto produce su ogni superficie. Se la risposta è “mi piace”, non è una verifica.
Sei ruoli, non venti colori
| Ruolo | Uso | Soglia |
|---|---|---|
| Canvas | Sfondo della pagina | - |
| Surface | Card, pannelli, dialog | Deve distinguersi dal canvas |
| Testo | Body e titoli | 4.5:1 (3:1 se grande) |
| Testo secondario | Metadati, helper | 4.5:1 |
| Bordo | Separatori e input | 3:1 sui controlli |
| Accent | Azione primaria e focus | 3:1 sul canvas |
Con sei ruoli puoi cambiare marca senza riscrivere i componenti. Con venti colori nominati, ogni tema diventa un’eccezione.
Il contrasto va misurato, non stimato
- Usa un contrast checker con i valori esatti dei token, non con i colori del mockup.
- Misura ogni coppia testo/superficie: una palette può passare su bianco e fallire su grigio.
- Controlla anche lo stato `hover`, `disabled` e `focus`.
- Ripeti tutto in tema scuro: i valori non si ereditano.
:root {
--ui-bg: 0 0% 100%;
--ui-surface: 240 20% 98%;
--ui-fg: 240 10% 4%;
--ui-fg-muted: 240 4% 38%;
--ui-border: 240 6% 88%;
--ui-accent: 221 83% 45%;
}
html.dark {
--ui-bg: 240 10% 4%;
--ui-surface: 240 6% 9%;
--ui-fg: 0 0% 98%;
--ui-fg-muted: 240 5% 70%;
--ui-border: 240 4% 18%;
--ui-accent: 217 90% 62%;
}I tre errori ricorrenti
Grigio su grigio
Testo `#888` su superficie `#f5f5f5` sembra elegante e fallisce. Il testo secondario è il primo a sparire, ed è quello che contiene le informazioni utili.
Accent come testo
Un accent acceso funziona come bottone e fallisce come testo su canvas chiaro. Tieni separati il ruolo azione e il ruolo informazione.
Focus invisibile
Il ring di focus è un elemento di interfaccia: deve avere 3:1 contro il colore adiacente. Se lo nascondi perché “sporca”, stai togliendo orientamento a chi usa la tastiera.
Verifica in tre passaggi
- Apri la pagina e misura testo, testo secondario, bordi e focus.
- Ripeti in tema scuro e con il tema di sistema.
- Controlla un dialog e un toast: le superfici sono distinguibili?
Il layer di token usato da EneUI è documentato in /components. La checklist completa per i componenti è nell’articolo sui componenti accessibili.
Domande frequenti
Qual è il rapporto di contrasto minimo?
4.5:1 per il testo normale, 3:1 per il testo grande e per gli elementi di interfaccia come bordi e focus.
Il contrasto si misura sui colori del design?
Sui valori finali renderizzati. Un mockup può usare un colore che il browser approssima in modo diverso.
Un tema scuro può usare gli stessi colori?
No. I valori vanno rimappati: lo stesso accent su fondo nero può abbagliare o perdere contrasto.
Basta controllare il titolo?
No. Il testo secondario e i bordi dei controlli sono i punti che falliscono più spesso.
Come testo la palette in modo ripetibile?
Estrai i token, misura le coppie con uno script o un contrast checker e salva il risultato: così il test resta uguale dopo ogni modifica.