# UI palette: how to measure it instead of picking it by eye

A palette is not a set of colours: it is a map of roles with contrast thresholds. Here is how to test it in light and dark before an audit does.

> Page: https://ui.eneawork.it/blog/palette-ui-contrasto-misurato
> Markdown: https://ui.eneawork.it/blog/palette-ui-contrasto-misurato.md

*2026-10-31*

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

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

: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.

Se devi scegliere tra un colore più bello e uno leggibile, scegli quello leggibile: la palette non è un poster.

## Verifica in tre passaggi

Il layer di token usato da EneUI è documentato in /components. La checklist completa per i componenti è nell’articolo sui componenti accessibili.

## FAQ

### 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.