Color Contrast Checker

Cos’è il Verifica Contrasto Colori?

Questo strumento calcola il Contrast Ratio (rapporto di contrasto) tra un colore in primo piano (testo) e un colore di sfondo, per poi verificare se la combinazione soddisfa le linee guida di accessibilità WCAG 2.0 ai livelli AA e AAA. Simula inoltre il daltonismo, suggerisce correzioni per le coppie non conformi ed esporta il codice in vari formati.

Come Verificare il Contrasto dei Colori

Scegliere i Colori

• Color A (primo piano/testo) e Color B (sfondo) hanno ciascuno un campo per l’inserimento hex e un selettore di colori.
• La Shade Scale sotto ogni selettore permette di affinare la luminosità. Clicca su qualsiasi tonalità per applicarla all’istante.
• Il Color Wheel regola visivamente la tinta del Color A. Il colore complementare è mostrato subito sotto: clicca per applicarlo come Color B.
• Swap inverte Color A e Color B.

Cosa Significano i Risultati

Risultato	Cosa mostra
Contrast Ratio	Il rapporto calcolato (1:1 – 21:1). Più è alto, meglio è.
A11y Score	Un punteggio di accessibilità su 100 basato sul rapporto di contrasto.
WCAG AA / AAA	Superato o fallito per Normal Text e Large Text a ogni livello.
Preview	Un’anteprima in tempo reale che mostra intestazione, corpo del testo, pulsante, badge, campo di input e card con i tuoi colori.
Fix Suggestion	Quando il contrasto non supera l’AA, una card cliccabile suggerisce la tonalità valida più vicina con il relativo rapporto. Clicca per applicarla.

Soglie WCAG

Livello	Normal Text	Large Text
AA	Minimo 4.5:1	Minimo 3:1
AAA	Minimo 7:1	Minimo 4.5:1

• Normal text: sotto i 18pt (o sotto i 14pt in grassetto)
• Large text: 18pt e superiori (o 14pt in grassetto e superiori)

Funzionalità Aggiuntive

• Undo / Redo – per scorrere avanti e indietro tra le modifiche di colore.
• Share Result – copia un URL con i colori attuali incorporati. Chiunque lo apra vedrà la stessa coppia.
• Pin – salva fino a 8 coppie di colori per confrontarle fianco a fianco. Clicca su una coppia fissata per ricaricarla.
• Brand Colors – 8 palette di brand reali (Spotify, Slack, GitHub, ecc.) con i loro rapporti di contrasto. Cliccaci sopra per caricarle.
• A11y Check – simula 4 tipi di daltonismo (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) con il rapporto di contrasto effettivo per ognuno.
• Code Output – genera codice pronto per essere copiato in CSS, Tailwind 4, Tailwind 3, Flutter e React. Sezione comprimibile, aperta di default.
• Randomize / Clear All – genera una coppia di colori accessibile a caso o ripristina le impostazioni predefinite.

Buoni Esempi

Esempio 1: Testo Grigio su Bianco – un Errore Comune

Un testo grigio chiaro su sfondo bianco appare elegante, ma fallisce in accessibilità.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – AA Fallito
• Fix Suggestion raccomanda la tonalità 600 (#595959) per un 4.9:1 – AA Superato. Clicca per applicare.

Esempio 2: Verificare una Palette di un Brand

Clicca su Spotify nella sezione Brand Colors.

• Color A: #191414 (nero), Color B: #1DB954 (verde)
• Contrast Ratio: 4.9:1 – AA Superato, AAA Fallito
• Fissa (Pin) questa coppia, poi prova LinkedIn (#ffffff su #0A66C2, 4.7:1) e confrontale.

Esempio 3: Progettare in Modalità Scura (Dark Mode)

Trovare un colore di testo leggibile per uno sfondo blu navy scuro.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – AA e AAA Superato
• Apri A11y Check per confermare che anche tutti i 4 tipi di daltonismo vengono superati.

Esempio 4: Flusso di Lavoro per Sviluppatori – Esportazione del Codice

Dopo aver trovato una buona coppia, espandi Code Output e seleziona il tuo framework:

• CSS: proprietà personalizzate --fg e --bg
• Tailwind 4: valori di colore arbitrari
• React: oggetto di stile inline

Copia lo snippet direttamente nel tuo progetto.

Suggerimenti Chiave

• Inizia con i Brand Colors. Se stai controllando un brand esistente, cliccalo dalla lista preimpostata invece di digitare manualmente i valori hex.
• Usa la Fix Suggestion. Quando il contrasto è insufficiente, non tirare a indovinare: clicca sulla card del suggerimento per passare automaticamente alla tonalità valida più vicina.
• Fissa le coppie per confrontarle (Pin). Quando scegli tra diverse opzioni di colore, fissale tutte. Potrai ricaricarle e confrontarle fianco a fianco.
• Controlla anche il daltonismo. Una coppia che supera i criteri WCAG può risultare comunque difficile da distinguere per gli utenti daltonici. Apri la sezione A11y Check per verificare.
• Condividi la tua decisione. Usa Share Result per inviare l’URL con l’esatta coppia di colori a un designer o a un revisore.

Formula

Le linee guida WCAG 2.0 definiscono il Contrast Ratio utilizzando la luminanza relativa:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variabile	Significato
$CR$	Contrast Ratio
$L_1$	Luminanza relativa del colore più chiaro
$L_2$	Luminanza relativa del colore più scuro

La luminanza relativa è calcolata a partire dai valori sRGB dopo la linearizzazione: $L = 0.2126R + 0.7152G + 0.0722B$

Domande Frequenti

Devo puntare al livello AA o AAA?

L’AA è lo standard legale minimo nella maggior parte dei paesi. L’AAA fornisce una migliore leggibilità, ma è più difficile da raggiungere in tutti gli elementi di design. Un approccio pratico: AA per il corpo del testo, AAA per informazioni critiche come avvisi o errori.

Superare i criteri WCAG garantisce l’accessibilità per gli utenti daltonici?

Il rapporto di contrasto WCAG verifica la luminanza, non la distinzione delle tinte. Una coppia può superare le regole WCAG ma sembrare identica a una persona daltonica. Usa la sezione A11y Check per controllare e integra sempre i colori con icone o etichette di testo.

Quali formati di codice supporta questo strumento?

Proprietà personalizzate CSS, Tailwind CSS v3 e v4 (valori arbitrari), oggetti Color() di Flutter e stili inline di React. Seleziona il formato tramite l’interruttore nella sezione Code Output.

Posso salvare e condividere le mie coppie di colori?

Sì. Pin salva localmente fino a 8 coppie per il confronto. Share Result copia un URL con i colori incorporati: chiunque lo apra vedrà esattamente la stessa coppia.