Generatore di tavolozze di colori accessibili

Cos'è un generatore di palette di colori accessibili?

Un generatore di palette di colori accessibili è uno strumento che ti aiuta ad assemblare un insieme di colori per un sito web, un'app o un design di stampa dove ogni coppia di colori destinata a essere mostrata insieme (testo su sfondo, pulsante su tela, etichetta su campo) soddisfa i requisiti di contrasto WCAG. Il punto è catturare le combinazioni a basso contrasto in fase di design piuttosto che in fase di audit. Aggiungi colori a una palette, lo strumento calcola il rapporto di contrasto tra ogni coppia, ed etichetta ogni coppia come passa AAA, passa AA o fallisce. Iteri finché ogni coppia che effettivamente intendi usare passa.

Il rapporto di contrasto è un numero tra 1:1 (colori identici, invisibili) e 21:1 (nero su bianco). Il criterio di successo WCAG 2.2 1.4.3 richiede 4,5:1 per il testo del corpo a dimensione standard (Livello AA), 3:1 per il testo grande (24px+ regolare o 18,66px+ grassetto) e 4,5:1 per gli elementi grafici e i controlli UI (SC 1.4.11). WCAG AAA alza il testo del corpo a 7:1 e il testo grande a 4,5:1. La maggior parte dei siti web rivolti al pubblico deve soddisfare almeno AA secondo ADA, EAA, AODA e leggi simili; i siti governativi in molte giurisdizioni devono soddisfare AAA.

Questo strumento gira nel tuo browser. Scegli i colori con il selettore di colori, lo strumento calcola la luminanza relativa e i rapporti di contrasto usando la formula specificata da WCAG, e una griglia mostra lo stato di ogni coppia. Puoi esportare la palette finale come proprietà personalizzate CSS (var(--brand-primary)), lista HEX, snippet di configurazione Tailwind o JSON per design token. Nulla viene caricato; l'intera palette rimane sul tuo dispositivo.

Cosa c'è dentro lo strumento

La parte superiore dello strumento è un selettore di colori più un pulsante aggiungi alla palette. Scegli un colore, dagli un nome (Primario del Marchio, Superficie, Testo del Corpo, ecc.) e aggiungi. La palette cresce come una lista di campioni lungo il lato sinistro. Puoi modificare qualsiasi campione, rimuoverlo o trascinarlo per riordinare. Palette accessibili predefinite sono disponibili come punti di partenza (coppie ad alto contrasto, palette progettate in stile IBM Carbon, palette tonali Material Design 3); scegline una, poi personalizzala.

La griglia di contrasto prende ogni coppia di campioni e mostra il rapporto di contrasto più un badge passa/fallisce per ogni livello WCAG: AA-normale (4,5:1), AA-grande (3:1), AAA-normale (7:1), AAA-grande (4,5:1). Una coppia mostrata come 4,7:1 passa AA-normale ma fallisce AAA-normale; una coppia mostrata come 2,1:1 fallisce tutto. Passa su una cella per visualizzare l'anteprima della coppia come testo reale. Ordina la griglia per rapporto per individuare prima le coppie peggiori.

Il pannello di esportazione formatta la palette nel modo in cui la tua toolchain si aspetta: proprietà personalizzate CSS per CSS moderno, variabili Sass per pipeline più vecchie, config tema Tailwind per Tailwind CSS, design token JSON (Style Dictionary, spec W3C Design Tokens Community Group) per design system multi piattaforma, o semplicemente una lista HEX da incollare in Figma. Le convenzioni di denominazione sono preservate; puoi copiare e incollare direttamente nel tuo codice base.

Storia e contesto

La colorimetria CIE stabilisce il colore scientifico (1931)

La Commissione Internazionale per l'Illuminazione (CIE) pubblicò lo spazio colore CIE 1931 nel 1931, la prima descrizione matematica formale di come gli umani percepiscono il colore dagli spettri elettromagnetici. Ogni sistema di colore moderno (RGB, HSL, OKLCH, Lab, XYZ) si basa su CIE 1931 direttamente o tramite trasformazioni derivate. La formula della luminanza relativa che WCAG usa per calcolare il contrasto è un calcolo derivato da CIE: pesa i canali rosso, verde e blu in base a quanto fortemente l'occhio umano risponde a ciascuno (verde il più, blu il meno).

WCAG 1.0 introduce le linee guida sul contrasto (1999)

Le Linee Guida per l'Accessibilità dei Contenuti Web 1.0 (W3C, maggio 1999) hanno introdotto il contrasto come criterio formale di accessibilità (Checkpoint 2.2: assicurare che le combinazioni di colore di primo piano e di sfondo forniscano contrasto sufficiente). La prima versione era qualitativa; la soglia era vaga. WCAG 2.0 (dicembre 2008) è stato il primo a specificare rapporti di contrasto numerici usando la formula della luminanza relativa WCAG. Le soglie 4,5:1 e 7:1 in 2.0 sono state mantenute invariate fino a 2.1 (2018) e 2.2 (2023) perché bilanciano la leggibilità tra la maggior parte delle disabilità (bassa visione, perdita di sensibilità al contrasto correlata all'età, daltonismo) con vincoli pratici di design.

I design system codificati dal colore maturano (dal 2014 in poi)

Material Design di Google (2014), Carbon Design System di IBM (2015) e la più ampia ascesa dei design token (Salesforce 2014, Atlassian 2016) hanno tutti messo in primo piano il colore accessibile come preoccupazione a livello di sistema. Material Design 3 (2021) ha introdotto palette tonali (una rampa di luminosità a 13 passi per tonalità) progettate esplicitamente in modo che qualsiasi tono 600+ sulla scala di luminosità passi il contrasto 4,5:1 su bianco. Questo cambiamento ha reso le palette accessibili per default una pratica standard nei design system moderni, sostituendo il vecchio approccio del marchio prima dell'accessibilità.

APCA proposto come alternativa più accurata (dal 2019 in poi)

L'Accessible Perceptual Contrast Algorithm (APCA) è stato proposto da Andrew Somers a partire dal 2019 come sostituto percettivamente più accurato della formula di contrasto WCAG. Il contrasto WCAG sovravaluta la leggibilità dei colori chiari e sottovaluta il testo scuro su sfondi scuri; APCA corregge questi. WCAG 3.0 (la bozza successore di 2.x, in sviluppo da molti anni) dovrebbe adottare APCA o un algoritmo simile migliorato. Finché WCAG 3 non sarà rilasciato e adottato per legge, i rapporti di contrasto WCAG 2.x rimangono lo standard legale e industriale. Questo strumento usa la formula WCAG 2.x.

I design token diventano lo standard multi piattaforma (dal 2020 in poi)

Il W3C Design Tokens Community Group è stato formato nel 2020 per standardizzare i design token (valori nominati di colore, spaziatura, tipografia che si traducono tra CSS, iOS, Android, Figma e altre piattaforme). Strumenti come Style Dictionary, Tokens Studio e la spec W3C emergente si affidano tutti a formati di token leggibili dalla macchina. Le palette di colori accessibili sono sempre più spedite come design token così che la stessa palette verificata sia usata ovunque, eliminando la modalità di fallimento in cui il sito web passa il contrasto ma l'app mobile no.

OKLCH e spazi colore percettivamente uniformi (dal 2020 in poi)

CSS Color Module Level 4 (Raccomandazione Candidata 2024) ha aggiunto OKLCH, OKLab, Lab, LCH e altri spazi colore percettivamente uniformi al CSS nativo. OKLCH (introdotto da Bjorn Ottosson nel 2020) è particolarmente utile per generare palette accessibili perché passi di luminosità uguali appaiono uguali all'occhio, a differenza di HSL dove i passi di luminosità producono salti visivi irregolari. I generatori di palette moderni (Leonardo di Adobe, Polychrom, questo strumento quando impostato in modalità di input OKLCH) sfruttano questi spazi per produrre palette visivamente più coerenti che soddisfano gli obiettivi di contrasto allo stesso livello di luminosità.

Flussi pratici

Progettare una nuova palette del marchio

Inizia con il colore del marchio che devi mantenere (il colore del logo, il primario benedetto dal team di marketing). Aggiungilo alla palette, poi costruisci tinte (versioni più chiare) e ombre (versioni più scure) insieme ai neutri (bianco, superficie, variante di superficie, testo). Controlla ogni coppia testo su sfondo contro AA-normale. Se il tuo colore primario del marchio fallisce su bianco, hai due opzioni: usarlo solo per elementi grandi (loghi, accenti decorativi) e abbinare il testo del corpo con una variante più scura, o compromettere leggermente il colore del marchio. Questo strumento fa emergere quelle scelte in fase di design.

Auditing delle decisioni di colore di un sito esistente

Estrai i valori di colore dai tuoi design token esistenti (proprietà personalizzate CSS, config Tailwind, variabili Sass), inseriscili in questo strumento e rivedi la griglia di contrasto. Fallimenti comuni: testo grigio attenuato su bianco (spesso #999 o #aaa, che dà 2,8:1 o 2,5:1), pulsanti color marchio con testo bianco dove il pulsante è di tono medio, colori dei link su sfondi affollati. Documenta i fallimenti con i loro rapporti e quale criterio WCAG violano; quella documentazione è l'inizio di un piano di rimedio.

Scegliere colori di accento per grafici e visualizzazione dati

Per la visualizzazione dei dati, hai bisogno di colori di accento che passino il contrasto contro lo sfondo del grafico e che siano anche distinguibili l'uno dall'altro per gli utenti con deficit di visione dei colori. Abbina questo strumento a ColorBrewer (Cynthia Brewer, Penn State, 2002) che pubblica palette progettate per rimanere distinguibili sotto simulazioni di daltonismo. Esegui palette candidate attraverso entrambi gli strumenti: contrasto contro lo sfondo (questo strumento), distinguibilità tra i colori della palette (ColorBrewer o Viz Palette).

Costruire complementi in modalità scura per una palette chiara

La modalità scura non è solo la modalità chiara invertita; i requisiti di contrasto si applicano ancora ma l'occhio percepisce il testo chiaro su scuro in modo diverso dal testo scuro su chiaro (il dibattito APCA è in gran parte su questo). Costruisci la palette scura come un insieme parallelo di token nominati (surface-dark, text-dark, accent-dark) e controlla ogni coppia in modalità scura contro AA. Fallimenti comuni della modalità scura: bianco puro (#fff) su nero puro (#000) causa alone (sanguinamento di luce), quindi i designer spesso usano #e5e5e5 su #121212; questo passa ancora AA ma è più comodo da leggere.

Generare varianti di palette per superfici diverse

Le UI moderne hanno più livelli di superficie (sfondo, scheda, scheda elevata, modale, popover). Ogni superficie dovrebbe abbinarsi correttamente con ogni colore di testo e accento usato sopra. Aggiungi ogni superficie come un campione della palette e controlla ogni colore del testo contro ogni superficie. La griglia di contrasto mostra rapidamente se la tua coppia testo su modale fallisce quando testo su scheda passa (il modale di solito ha una tinta di sfondo leggermente diversa per indicare elevazione, che può far scendere il contrasto sotto AA senza che tu te ne accorga).

Documentazione di conformità per presentazione legale o di audit

Per la documentazione di conformità ADA o EAA, tipicamente devi mostrare che ogni combinazione di colori nel tuo design system passa il livello WCAG rilevante. Esporta la palette più la griglia di contrasto come parte della dichiarazione di accessibilità o VPAT (Voluntary Product Accessibility Template) per il tuo prodotto. Il JSON esportato è abbastanza strutturato da alimentare report di conformità automatizzati; la griglia visiva è buona per la revisione umana.

Insidie comuni

Trattare il colore del marchio come intoccabile

Il pattern più comune: il marketing insiste sul colore primario aziendale, ma fallisce il contrasto AA su bianco. Opzioni: usare il colore del marchio solo per elementi grandi o decorativi (passa la barra del testo grande più indulgente 3:1), scurire leggermente il colore per l'uso del testo (la maggior parte dei marchi ha flessibilità per una variante più scura), o cambiare il colore del testo del corpo da nero a un grigio scuro meno aspro così il colore del marchio si legge come accento. Strumenti come Leonardo (di Adobe) generano automaticamente varianti accessibili di un colore del marchio; abbinali a questo strumento per la verifica.

Usare il contrasto come unico controllo di accessibilità

Passare il contrasto non garantisce la leggibilità. Un rapporto 4,5:1 è il pavimento; alcuni utenti (bassa visione, perdita di sensibilità al contrasto correlata all'età, dislessia) beneficiano di rapporti più alti. WCAG SC 1.4.6 (Contrasto Migliorato, AAA) raccomanda 7:1 per il testo del corpo proprio perché 4,5:1 è il minimo, non l'obiettivo. Combina alto contrasto con dimensione del font sufficiente (16px+ per il corpo), altezza di linea adeguata (1,5x la dimensione del font) e scelte di font che preservano le forme delle lettere (evita pesi ultra sottili per il testo del corpo).

Dimenticare il contrasto non testuale (SC 1.4.11)

WCAG 1.4.11 (aggiunto in WCAG 2.1, 2018) richiede contrasto 3:1 per i componenti UI ed elementi grafici: bordi dei campi modulo, contorni dei pulsanti, icone, indicatori di focus. Questo è facile da perdere perché i designer pensano che il contrasto si applichi solo al testo. Un modulo pulito con sottili bordi grigi dei campi su bianco può fallire 1.4.11 anche se tutto il testo passa 1.4.3. Verifica ogni elemento visivo che trasmette significato o stato, non solo il testo sullo sfondo.

Sbagliare le regole del testo grande

La soglia del testo grande WCAG (3:1 invece di 4,5:1) si applica al testo che è 18pt o più grande (circa 24px), o 14pt grassetto (circa 18,66px grassetto). Qualsiasi cosa più piccola è testo normale e necessita 4,5:1. I designer a volte applicano la regola 3:1 del testo grande a tutti i livelli di intestazione, ma un h5 a 16px è testo normale secondo la definizione WCAG. Controlla la dimensione renderizzata, non il livello di intestazione. Il modificatore grassetto conta: 18px grassetto passa come testo grande; 18px regolare no.

Affidarsi al solo colore per trasmettere informazioni

WCAG 1.4.1 (Uso del Colore, Livello A) è separato dal contrasto. Anche con rapporti di contrasto perfetti, non puoi usare il colore come unico indicatore di stato (rosso uguale non valido, verde uguale valido, blu uguale link). Abbina il colore a un secondo segnale: icona (triangolo di avvertimento per errori), pattern (sottolineato per i link) o etichetta di testo (Richiesto accanto ai campi obbligatori). Gli utenti daltonici (circa l'8% degli uomini, lo 0,5% delle donne) e gli utenti su schermi monocromatici in scala di grigi si affidano a questi segnali secondari.

Dimenticare gli stati hover, focus e active

Un pulsante passa il contrasto nel suo stato predefinito ma lo stile :hover lo schiarisce sotto la soglia; il contorno :focus è un grigio sottile che fallisce 3:1 contro lo sfondo del pulsante; lo stato :active inverte i colori e la nuova combinazione fallisce. Testa ogni stato interattivo nella tua griglia di contrasto, non solo il predefinito. L'indicatore di focus in particolare è critico (SC 2.4.7 Focus Visibile, AA): se il focus non è chiaramente visibile, gli utenti solo da tastiera perdono il loro posto sulla pagina.

Privacy e gestione dei dati

I colori che aggiungi, i nomi della palette e i token esportati rimangono tutti nel tuo browser. I calcoli di contrasto girano in JavaScript sulla tua macchina; nulla viene caricato. Questo conta meno per le palette di colori che per i documenti ma conta ancora quando la palette è parte di un refresh del marchio non annunciato o un progetto cliente confidenziale: non vuoi che trapeli a un validatore SaaS di terze parti prima del lancio.

Una volta caricata la pagina, lo strumento funziona offline. Puoi disconnetterti da internet, costruire la palette, eseguire controlli ed esportare. I token esportati vengono scaricati direttamente tramite la normale finestra di dialogo di salvataggio del browser. Molti strumenti di colore cloud (Coolors, Adobe Color, anche alcuni controllori di accessibilità) memorizzano le palette lato server e potrebbero usarle per analytics o addestramento; per il lavoro confidenziale, preferisci strumenti lato client.

Quando non usare questo strumento

Per la simulazione completa del daltonismo (usa uno strumento dedicato)

Il contrasto non è la stessa cosa della compatibilità con il daltonismo. Una palette può passare tutti i controlli di contrasto e ancora confondere un utente daltonico (rosso e verde alla stessa luminanza appaiono identici a un deuteranope). Per la simulazione del daltonismo, usa il Color Blindness Simulator di Absolutool o la vista di accessibilità di Adobe Color, entrambi che applicano le effettive trasformazioni di colore di deuteranopia, protanopia e tritanopia. Esegui palette candidate attraverso sia questo strumento che un simulatore.

Per generare schemi di colori da zero (usa Leonardo o Coolors)

Questo strumento controlla e verifica le palette; non le genera da un singolo colore seed. Per la generazione di palette da zero (schemi analoghi, complementari, triadici, complementari divisi), usa Adobe Color, Coolors o Leonardo (che genera varianti accessibili di un colore del marchio). Genera con quegli strumenti, poi valida con questo. Leonardo specificamente genera colori mirati a rapporti di contrasto specifici, che è il formato di input naturale per il passo di verifica di questo strumento.

Per il contrasto basato su APCA (quando WCAG 3 sarà rilasciato)

Questo strumento usa la formula di contrasto WCAG 2.x, che è l'attuale standard legale e industriale. Se hai specificamente bisogno di progettare per APCA (l'algoritmo proposto per WCAG 3), usa il Calcolatore di Contrasto APCA di Myndex Research. APCA produce valutazioni diverse (e probabilmente più accurate percettivamente), specialmente per testo scuro su scuro e chiaro su chiaro. Finché WCAG 3 non sarà ratificato e adottato per legge (probabilmente diversi anni di distanza), WCAG 2.x è ciò che gli auditor di conformità controlleranno.

Per audit WCAG completi (usa uno strumento completo)

Il contrasto è un criterio tra decine. Per un audit completo di accessibilità, usa axe DevTools, Lighthouse, WAVE o una soluzione a pagamento come Tenon o PowerMapper. Questi controllano contrasto, testo alt, ARIA, etichette dei moduli, ordine di focus, struttura delle intestazioni e molti altri in un singolo passaggio. Usa questo strumento durante il design della palette e gli strumenti completi durante il test di integrazione.

Altre domande

Qual è la differenza tra contrasto AA e AAA?

AA è lo standard, richiesto per legge dalla maggior parte delle leggi sull'accessibilità (ADA, EAA, AODA, ecc.) e ciò che ogni sito rivolto al pubblico dovrebbe soddisfare. AAA è più rigoroso: 7:1 per il testo del corpo, 4,5:1 per il testo grande. AAA è generalmente richiesto solo per contenuti ad alto rischio (siti web governativi in alcune giurisdizioni, informazioni mediche e legali, contenuti per utenti con bassa visione come pubblico principale). Progettare per AAA è restrittivo; pochi marchi possono soddisfarlo senza limitazioni significative di colore. Mira ad AA per default e AAA dove il pubblico del contenuto lo giustifica.

Perché WCAG usa specificamente 4,5:1?

La soglia 4,5:1 è stata scelta in modo che il testo rimanga leggibile per gli utenti con visione 20/40 (la soglia per la cecità legale in molte giurisdizioni) senza ingrandimento assistivo. È anche approssimativamente il rapporto di contrasto al quale gli utenti con deficit di visione dei colori possono distinguere in modo affidabile primo piano da sfondo. Il numero è calibrato empiricamente dalla ricerca sulla visione; non è arbitrario. Il 7:1 di AAA corrisponde approssimativamente a visione 20/80, accogliendo significativamente più disabilità.

Come funziona la formula di contrasto?

Converti ogni colore da sRGB a luminanza relativa usando la formula: correzione gamma di ogni canale (R, G, B) applicando una funzione a tratti (lineare per valori bassi, esponenziale per alti), poi pesa per 0,2126 R + 0,7152 G + 0,0722 B (la sensibilità relativa dell'occhio umano a ciascun canale). Il rapporto di contrasto tra due colori è (L1 + 0,05) / (L2 + 0,05) dove L1 è la luminanza più chiara e L2 quella più scura. L'offset 0,05 tiene conto del riflesso ambientale dello schermo. Il risultato è un numero tra 1 (identico) e 21 (massimo).

Devo preoccuparmi del contrasto per il testo placeholder nei campi modulo?

Sì. Il testo placeholder conta come testo secondo WCAG e deve soddisfare il contrasto 4,5:1. Il default del browser per il placeholder è grigio chiaro (#a9a9a9 nella maggior parte dei browser), che fallisce su bianco. Sovrascrivi con CSS: ::placeholder { color: #595959; } o simile che passa AA. Meglio ancora, evita i placeholder del tutto per campi importanti; usa etichette visibili sopra il campo e riserva i placeholder per la formattazione di esempio. I pattern di etichetta fluttuante combinano l'etichetta visibile e la chiarezza dell'esempio.

Il contrasto si applica a pulsanti e campi modulo disabilitati?

No. WCAG SC 1.4.3 esenta esplicitamente i controlli disabilitati perché l'aspetto attenuato è esso stesso un segnale visivo che il controllo non è disponibile. I pulsanti disabilitati sono tipicamente sbiaditi a circa il 38% di opacità e fallirebbero il contrasto nel loro stato disabilitato per design. Tuttavia, lo stato disabilitato deve essere ancora chiaramente distinguibile dallo stato abilitato, quindi non rimuovere semplicemente tutto il trattamento visivo; usa una chiara differenza visiva più un attributo disabilitato accessibile al lettore di schermo.

E il contrasto per contenuti grafici come grafici e icone?

WCAG 1.4.11 Contrasto Non Testuale (aggiunto in 2.1) richiede contrasto 3:1 per i componenti UI (pulsanti, bordi del modulo, indicatori di focus) ed elementi grafici significativi (icone che trasmettono stato, elementi del grafico che distinguono le serie di dati). La soglia 3:1 è inferiore al 4,5:1 per il testo perché la grafica generalmente ha aree visibili più grandi. La grafica decorativa che non trasmette significato è esente. Applica 3:1 a ogni icona che trasmette stato (occhio aperto per visibile, X per eliminare, segno di spunta per selezionato) e ogni segmento del grafico che deve essere distinguibile.