Palette colori accessibile
Genera una palette nello strumento principale e verifica le coppie testo/sfondo che userai. L’export rimane disponibile anche quando una coppia non supera il controllo.
Questa guida spiega il flusso di lavoro. Usa lo strumento principale collegato qui sotto per generare colori ed esportare file.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromoforge.
- 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
Un’interfaccia accessibile parte dalle coppie testo/sfondo usate nel contesto reale. Chromoforge genera armonie e scale di tonalità: una palette generata non è automaticamente una certificazione WCAG.
Il pannello contrasto mostra combinazioni forti e deboli. Usa il controllo manuale per ogni coppia che vuoi applicare, anche con colori esterni alla palette.
Assegna nel progetto i ruoli primario, neutro e di stato. Se una coppia non passa, scegli un’altra tonalità o modifica il colore di input e verifica di nuovo.
Gli export CSS, SCSS e JSON contengono i valori della palette e la scala numerica. Documenta separatamente le coppie approvate e i loro rapporti di contrasto.
Esempi pratici
- Revisione accessibilità: documenta ogni coppia testo/sfondo usata nell’interfaccia e verificala nel suo contesto.
- 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 generatore crea armonie e tonalità. Il controllo WCAG valuta una coppia testo/sfondo scelta. Usa entrambi i passaggi: una palette può includere colori decorativi inadatti al testo normale.
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.
Altri strumenti Chromoforge
Strumenti e guide collegati
Esempio pratico
Verifica insieme il testo e lo sfondo effettivi. Il nome del colore o il numero della tonalità non garantiscono un testo leggibile.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */