Palette colori accessibile
Progetta palette che mantengono il testo leggibile e compatibile con WCAG.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona la palette colori accessibile
Una palette accessibile non si costruisce "a posteriori" verificando i contrasti — si progetta con l'accessibilità come vincolo iniziale. Questo strumento genera solo combinazioni che passano almeno WCAG AA fin dal primo click.
Il processo è diverso da un semplice generatore di palette: per ogni colore base, lo strumento calcola automaticamente le varianti di luminosità che garantiscono contrasto 4.5:1 su sfondo bianco o nero. Questo significa che se inserisci un verde lime brillante (che da solo non passerebbe mai il contrasto come testo su bianco), lo strumento trova la versione più scura che funziona, invece di mostrarti un colore inutilizzabile.
La palette risultante è strutturata in ruoli semantici: colore primario (testo, bottoni attivi), colore secondario (elementi di supporto), neutrali (sfondi, bordi, testo secondario) e stato (errore, successo, avviso). Ogni ruolo include la coppia testo+sfondo già verificata.
Tutti i valori vengono esportati come custom properties CSS con il ratio di contrasto annotato in commento, così chi legge il CSS capisce subito perché è stato scelto quel tono specifico.
Esempi pratici
- Prodotti con requisiti legali: app pubbliche, siti PA, e-commerce con utenti diversificati — WCAG AA è il baseline legale in molte giurisdizioni EU. Parti da una palette già conforme.
- Design system aziendale: documenta la palette con i ratio di contrasto per ogni combinazione permessa. Il team di sviluppo sa quali coppie usare senza dover ricalcolare ogni volta.
- Revisione palette esistente: incolla i colori del progetto corrente e scopri subito quante combinazioni falliscono — prima di un audit esterno.
- Formazione del team: usa le coppie generate come esempi didattici per spiegare perché certi colori di moda (es. grigio chiaro su bianco) sono problematici per l'accessibilità.
FAQ — Palette accessibile
Qual è la differenza tra questa palette e il controllo contrasto WCAG?
Il controllo contrasto verifica una coppia specifica che tu fornisci. La palette accessibile genera automaticamente una serie di colori garantendo fin dall'inizio che ogni combinazione testo/sfondo proposta superi AA. È la differenza tra controllare e progettare.
Posso usare questa palette anche per utenti con daltonismo?
WCAG non copre esplicitamente il daltonismo nella sezione contrasto, ma una palette accessibile ben fatta dovrebbe comunque evitare di affidarsi al colore come unico segnale di stato. Abbina sempre il colore a un'icona o testo (es. "Errore" non solo rosso). Lo strumento segnala le coppie che potrebbero essere problematiche per deuteranopia.
AAA è necessario per la maggior parte dei progetti?
No. AAA è lo standard per casi d'uso particolari: testi molto lunghi, utenti con ipovisione grave, contesti sanitari. Per la maggior parte delle interfacce digitali, AA è sufficiente e più fattibile dal punto di vista del design. Punti AAA solo dove il brand color lo permette senza sacrificare l'estetica.
Come gestisco l'accessibilità dei colori in dark mode?
In dark mode le regole WCAG si applicano identicamente: il contrasto testo/sfondo deve essere almeno 4.5:1. I toni medi di una palette tipicamente falliscono su sfondo scuro. Genera la palette separatamente per light e dark mode, o usa uno strumento che mostra entrambe le modalità contemporaneamente.
L'accessibilità del colore copre anche le immagini?
WCAG 1.4.11 (Non-text Contrast) richiede 3:1 per elementi grafici informativi (icone, grafici, indicatori di stato). Le immagini puramente decorative sono esenti. Le fotografie non rientrano in questo requisito, ma il testo sovrapposto a un'immagine deve comunque rispettare il contrasto.