⇄ Inverti i colori

Come usare

1. Scegli un colore di primo piano (testo) e un colore di sfondo.
2. Il rapporto di contrasto si aggiorna all'istante.
3. Controlla i punteggi WCAG (AA/AAA) per testo normale e grande.
4. Clicca su Inverti per scambiare i colori.

Domande frequenti

Cos'è WCAG?

Le WCAG (Web Content Accessibility Guidelines) sono gli standard internazionali per rendere il contenuto web accessibile. Il livello AA è lo standard più comunemente richiesto. Il livello AAA è il più alto.

Cosa conta come «testo grande»?

Il testo grande è definito come almeno 18 pt (24 px) o 14 pt (18,66 px) in grassetto. Ha un requisito di contrasto più basso perché è più facile da leggere.

A quale rapporto di contrasto puntare?

Per il corpo del testo, punta ad almeno 4,5 : 1 (AA). Per la migliore accessibilità, punta a 7 : 1 (AAA). I titoli e i testi grandi hanno bisogno di almeno 3 : 1.

Cosa misura effettivamente WCAG

Il «contrasto» nell'accessibilità web non è «quanto sembrano diverse le due tinte», ma un preciso rapporto di luminanza relativa tra due colori. La luminanza è un'approssimazione percettiva di quanto appare luminoso un colore a un osservatore normovedente tipico. Il rapporto va da 1:1 (due colori con luminanza identica, invisibili l'uno sull'altro) a 21:1 (nero puro #000000 su bianco puro #ffffff). Tre criteri di successo normativi WCAG si basano su questo rapporto:

• 1.4.3 Contrast (Minimum), Level AA: almeno 4,5:1 per il testo normale, 3:1 per il testo grande.
• 1.4.6 Contrast (Enhanced), Level AAA: almeno 7:1 normale, 4,5:1 grande.
• 1.4.11 Non-text Contrast, Level AA (aggiunto in WCAG 2.1), almeno 3:1 per i componenti UI e gli oggetti grafici significativi rispetto ai colori adiacenti.

Il limite di 4,5:1 non è arbitrario. La derivazione WCAG usa come base 3:1 secondo ANSI per la visione normale, moltiplicata per 1,5 per gli utenti con acuità 20/40 (la soglia spesso usata per definire la «ipovisione» legale). 4,5 = 3 × 1,5. La soglia AAA di 7:1 estende la stessa logica a un'acuità di circa 20/80. Loghi, nomi di marchi e testi incidentali o decorativi sono esenti, ma tutto il resto è soggetto alla regola.

La formula

La formula del contrasto nella tecnica WCAG G18 prevede tre passaggi. Gli input sono valori di canale sRGB a 8 bit (0-255), ciascuno prima convertito in un intervallo 0-1:

1. Linearizzare sRGB (annullare la curva gamma). Per ciascun canale V: se V ≤ 0,04045, V_linear = V ÷ 12,92; altrimenti V_linear = ((V + 0,055) ÷ 1,055)^2,4. (I documenti WCAG più vecchi usavano 0,03928; il W3C ha aggiornato per errata a 0,04045 per corrispondere alla specifica sRGB formale: la differenza numerica è trascurabile.)
2. Calcolare la luminanza relativa: L = 0,2126·R + 0,7152·G + 0,0722·B (linearizzati). I pesi derivano dalla funzione di efficienza luminosa fotopica dell'osservatore standard CIE 1931: l'occhio umano è più sensibile al verde (~71%), poi al rosso (~21%), poi al blu (~7%). Ecco perché il testo blu puro su sfondo bianco può non superare il contrasto, pur sembrando molto diverso.
3. Calcolare il rapporto: (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è il colore più chiaro e L2 quello più scuro. L'offset di 0,05 modella il riverbero ambientale su un display tipico e impedisce che il rapporto esploda quando un colore è vicino al nero.

Esempio pratico per nero su bianco: il bianco ha L = 1,0, il nero ha L = 0, quindi il rapporto è (1 + 0,05) ÷ (0 + 0,05) = 21. Questo è il contrasto massimo possibile in sRGB.

Che cosa si intende per «testo grande»?

WCAG definisce il testo a grande scala come almeno 18 punti (peso normale) o 14 punti grassetto. Convertito in pixel CSS con il rapporto 1pt = 1,333px indicato dal W3C:

• 18pt = 24px normale
• 14pt grassetto = 18,66px grassetto

La maggior parte dei browser imposta il testo del corpo a 16px / 12pt, non grande. Un errore comune è considerare grande qualsiasi intestazione: un <h3> stilizzato a 18px normale rientra comunque nella regola 4,5:1 per il testo normale.

Il famoso caso limite: #767676 su bianco

I designer che inseguono il minimalismo scelgono spesso grigi intermedi per il testo del corpo. Due valori che sembrano identici all'occhio si trovano su lati opposti della soglia WCAG:

Primo piano	Sfondo	Rapporto	AA Normale
#000000	#ffffff	21.00	Superato (max)
#595959	#ffffff	~7.0	Superato + AAA
#767676	#ffffff	4.54	Superato (appena)
#777777	#ffffff	4.48	Non superato
#959595	#ffffff	3.00	Non superato (solo grande)
#ffff00	#ffffff	1.07	Non superato

Uno spostamento di un solo carattere esadecimale, la differenza tra #767676 e #777777, ribalta lo stesso grigio visivo da superato a non superato, perché WCAG vieta esplicitamente di arrotondare i rapporti per eccesso. WebAIM cita espressamente #777777 come una «tonalità di grigio comunemente usata» che non soddisfa il livello AA. Questo singolo trabocchetto genera una quota misurabile di errori negli audit automatici su siti reali.

I limiti della formula

La formula della luminanza relativa è veloce e deterministica, ma presenta difetti percettivi ben documentati:

• Simmetria. WCAG 2 restituisce lo stesso rapporto sia che si metta testo chiaro su sfondo scuro sia testo scuro su sfondo chiaro. Gli studi empirici sulla lettura mostrano che il chiaro su scuro richiede maggiore contrasto rispetto allo scuro su chiaro per sembrare ugualmente leggibile, in parte a causa della dilatazione pupillare e dell'«alazione» sui glifi luminosi su campi scuri. Le interfacce in dark mode che superano WCAG 2 AA possono comunque risultare sbiadite.
• Cecità spaziale. La formula ignora il peso del carattere, lo spessore del tratto e la dimensione del font al di là della soglia del testo grande. Un font 18px sottilissimo e un font 18px a peso 900 vengono trattati in modo identico.
• Superamento eccessivo in dark mode. Secondo la documentazione APCA, la formula sovrastima sistematicamente il contrasto per i colori scuri. Due grigi scuri che superano matematicamente WCAG 2 possono essere visivamente indistinguibili su un monitor reale.

APCA (Accessible Perceptual Contrast Algorithm) è il candidato sostituto in fase di prototipazione per WCAG 3. Restituisce un singolo valore Lc con segno, compreso approssimativamente tra −108 e +106, è sensibile alla polarità e include una tabella di consultazione per peso/dimensione del font. APCA è attualmente un riferimento beta non commerciale, non un obiettivo di conformità legale (i siti in produzione dovrebbero ancora puntare a WCAG 2.1 / 2.2 AA), ma è un controllo di leggibilità più accurato, specialmente per la dark mode. Chrome DevTools include un'anteprima APCA integrata nel selettore colore.

Perché questo è rilevante dal punto di vista legale

WCAG 2.2 è diventato una Raccomandazione W3C il 5 ottobre 2023, ma i criteri di contrasto restano invariati rispetto alla versione 2.1. Il contrasto cromatico è uno dei problemi più citati nelle cause legali sull'accessibilità digitale, e diverse giurisdizioni lo rendono di fatto obbligatorio:

• Stati Uniti, Section 508 (aggiornata nel 2017) è armonizzata con WCAG 2.0 AA, quindi il rapporto 4,5:1 è vincolante per gli appalti federali. Le sentenze relative all'ADA Title III hanno ripetutamente citato WCAG AA come standard de facto per i siti commerciali rivolti al pubblico. Il DOJ ha adottato una norma relativa al Title II nell'aprile 2024, che richiede ai contenuti web degli enti statali e locali di soddisfare WCAG 2.1 AA, con scadenze graduali entro la fine del decennio.
• Unione Europea, EN 301 549 incorpora WCAG 2.1 AA. La scadenza per la conformità allo European Accessibility Act (Direttiva 2019/882) era il 28 giugno 2025, e riguarda siti web, app mobile, e-commerce, banche, e-book e altro ancora. Le microimprese sono esenti per i servizi. Le sanzioni variano da uno Stato membro all'altro.
• L'obbligo di «accomodamenti ragionevoli» del Regno Unito, Equality Act 2010 si applica al settore privato e pubblico. Gli enti del settore pubblico sono vincolati dalle normative sull'accessibilità del 2018, che incorporano EN 301 549 / WCAG 2.1 AA.
• Canada, AODA (Ontario) e il federale Accessible Canada Act richiedono WCAG 2.0 AA; le scadenze graduali dell'AODA sono ormai abbondantemente trascorse.

Contrasto cromatico e daltonismo

Un punto di confusione frequente: il rapporto WCAG è basato sulla luminanza e rimane utile per la maggior parte degli utenti daltonici; un rapporto di 4,5:1 derivato dalla luminanza corrisponde a un segnale percettivo forte anche quando le informazioni di tonalità sono perdute. Ecco perché i criteri di contrasto si affiancano a un criterio separato, 1.4.1 Use of Color, che vieta di affidarsi al colore come unico mezzo per trasmettere informazioni. Il contrasto non dice se un grafico rosso contro verde è leggibile per un deuteranope, ma solo se ciascun colore contrasta individualmente con lo sfondo del grafico. I grafici e le interfacce con stati diversi richiedono pattern, etichette o forme sovrapposti al colore.

Lista di controllo pratica

• Testo del corpo su bianco: restare su #595959 o più scuro per AAA; #767676 è il grigio più chiaro che supera ancora AA Normale.
• Blu del brand: molti si collocano nella fascia 3-4,5. #1976d2 è un tipico blu Material a circa 4,59:1: supera appena AA Normale su bianco. #42a5f5 a circa 2,6:1 non supera.
• Bordi dei form: un bordo 1px solid #ccc su bianco è circa 2,13:1 e non supera il criterio 1.4.11. Usare #767676 o più scuro.
• Gli indicatori di focus devono raggiungere 3:1 rispetto allo sfondo. Il contorno predefinito del browser viene spesso sovrascritto dal CSS di reset senza un sostituto che soddisfi la soglia.
• Il testo segnaposto è tecnicamente incidentale, ma gli utenti lo leggono; trattarlo come se si applicasse il 4,5:1.
• Non fidarsi dell'occhio per la dark mode. I rapporti WCAG 2 sovrastimano sistematicamente i fondi scuri. Verificare in modo incrociato con APCA in Chrome DevTools.

Altre domande

Perché il giallo puro su bianco non supera il contrasto pur sembrando luminoso?

Il giallo (#ffff00) su bianco è 1,07:1: praticamente nessun contrasto. La formula della luminanza pondera il verde al 71% e il rosso al 21%, quindi il giallo (R+G) ha una luminanza molto vicina a quella del bianco. Il giallo su nero, al contrario, è 19,56:1, una delle combinazioni più leggibili conosciute: ecco perché viene usato per i segnali stradali e i caschi di sicurezza.

Devo sempre puntare al livello AAA?

No. Lo stesso WCAG afferma: «Non è raccomandato richiedere la conformità al Livello AAA come politica generale per interi siti, poiché non è possibile soddisfare tutti i Criteri di Successo di Livello AAA per alcuni contenuti.» Il livello AA è l'obiettivo legale quasi ovunque; il livello AAA è per letture informative ad alto impatto (contenuti di lunga durata, documenti governativi destinati al pubblico generale, pubblicazioni con l'accessibilità come priorità).

Gli strumenti automatizzati rilevano tutti i problemi di contrasto?

No. axe-core, Lighthouse e audit simili segnalano in modo affidabile gli errori di testo su colore piatto, ma non riescono a testare il testo sovrapposto a immagini di sfondo, gradienti CSS, sfondi di pseudo-elementi o colori di bordi CSS: questi vengono contrassegnati come «incompleti» e richiedono una revisione manuale. Uno strumento dal vivo come questo è utile anche autonomamente per campionare il colore di sfondo dominante da un'immagine e verificare solo la coppia testo/sfondo prima di rilasciare.

Questo strumento supporta la trasparenza / alfa?

Questa pagina controlla coppie di colori esadecimali opachi. Se il testo o lo sfondo usa il canale alfa, il contrasto effettivo dipende da ciò che si trova dietro: sarà necessario calcolare prima il colore in primo piano composto e verificare il colore opaco risultante.

Vengono inviati dati a un server?

No. La formula della luminanza e il rapporto vengono calcolati nel browser; i colori non lasciano mai il dispositivo. La pagina funziona offline una volta caricata.

Strumenti correlati