Verificatore di Contrasto — Strumento Gratuito per il Rapporto di Contrasto WCAG

Il colore è uno degli strumenti più potenti del design, ma può anche essere uno degli esclusivi. Una palette di colori bellissima non significa nulla se i tuoi utenti non possono leggere il testo. Un cattivo contrasto è la causa più comune di fallimenti nell'accessibilità sul web, colpendo più di 300 milioni di persone con deficit visivo e innumerevoli altre che utilizzano dispositivi mobili sotto il sole diretto o schermi invecchiati con luminosità sbiadita. Il nostro Verificatore di Contrasto gratuito calcola istantaneamente il rapporto di contrasto tra due colori qualsiasi e ti dice esattamente dove si trova rispetto agli standard WCAG AA e AAA — così puoi progettare in modo inclusivo senza dover indovinare.

Cosa è il Contrasto dei Colori e Perché è Importante?

Il contrasto dei colori è la differenza nella luminosità percepita tra due colori. Quando il testo si trova su uno sfondo, il contrasto tra di essi determina se il testo è leggibile. Se i colori sono troppo simili in luminosità, si fondono e diventano invisibili per le persone con vista ridotta, cecità colorata o anche per gli utenti che socchiodono lo schermo sotto il sole diretto.

Le Linee Guida per l'Accessibilità del Contenuto Web (WCAG) definiscono matematicamente il contrasto utilizzando la luminanza relativa — una misura di quanto un colore appare luminoso all'occhio umano. La formula tiene conto del fatto che i nostri occhi sono più sensibili alla luce verde rispetto al rosso o al blu. Un verde brillante potrebbe sembrare più chiaro di un rosso brillante anche se hanno la stessa luminosità numerica in RGB. La formula WCAG corregge questo, producendo un rapporto di contrasto che riflette accuratamente la percezione umana.

Il rapporto varia da 1:1 (colori identici, nessun contrasto) a 21:1 (nero puro su bianco puro, massimo contrasto). La maggior parte dei progetti accessibili si trova in mezzo. Un rapporto di 4.5:1 è il minimo per il testo normale sotto WCAG AA. 7:1 è lo standard più rigoroso AAA. Questi non sono numeri arbitrari — si basano su ricerche estese su ciò che le persone con vari disturbi visivi possono effettivamente distinguere.

Oltre all'accessibilità, il contrasto influisce su tutti. I progetti ad alto contrasto sono più facili da leggere su schermi piccoli, in ambienti luminosi e per gli utenti over 40 i cui occhi naturalmente perdono sensibilità al contrasto. Il testo a basso contrasto potrebbe sembrare elegante su un monitor calibrato del designer, ma diventa illeggibile su un laptop economico, uno schermo di telefono danneggiato o un proiettore in una stanza illuminata.

Come Utilizzare il Verificatore di Contrasto

Testare una combinazione di colori richiede pochi secondi. Scegli due colori e ottieni un verdetto istantaneo.

1. Scegli il colore di primo piano. Questo è tipicamente il colore del testo. Clicca sul campione di colore per aprire il selettore nativo, o digita direttamente un codice HEX nel campo di input.
2. Scegli il colore di sfondo. Questo è la superficie dietro il testo. Utilizza lo stesso selettore o digita manualmente un codice HEX.
3. Leggi il rapporto di contrasto. Lo strumento visualizza il rapporto esatto in modo prominente — ad esempio, 7.23:1 — così sai esattamente dove ti trovi.
4. Verifica la conformità WCAG. La tabella dei risultati mostra lo stato di pass/fail per:
   • Testo normale a WCAG AA (4.5:1) e AAA (7:1)
   • Testo grande a WCAG AA (3:1) e AAA (4.5:1)
   • Componenti dell'interfaccia utente a WCAG AA (3:1)
5. Anteprima dei colori nel contesto. Lo strumento mostra esempi di testo normale e titoli grandi con la tua combinazione scelta, così puoi giudicare la leggibilità visiva reale.
6. Scambia i colori con il pulsante di inversione per testare la combinazione inversa — testo chiaro su fondo scuro invece di testo scuro su fondo chiaro.
7. Copia il rapporto nel tuo clipboard con un clic per documenti o note del sistema di design.

L'intero processo è istantaneo. Modifica uno dei colori e osserva il rapporto, la tabella di conformità e l'anteprima aggiornarsi in tempo reale.

Comprendere i Rapporti di Contrasto

Intervallo del Rapporto	Livello di Accessibilità	Cosa Significa
1:1 a 2.99:1	Non supera nessun standard	Il testo è appena distinguibile dallo sfondo; inutilizzabile per qualsiasi contenuto leggibile
3:1 a 4.49:1	Superando AA solo per testo grande e UI	Adatto per titoli grandi (18pt+), pulsanti, icone e bordi; fallisce per il testo principale
4.5:1 a 6.99:1	Superando AA per tutti i testi	Rispetta lo standard minimo per il testo principale; leggibile per la maggior parte degli utenti
7:1 a 21:1	Superando AAA per testo normale	Accessibilità migliorata; leggibile per gli utenti con gravi problemi visivi; ideale per contenuti lunghi

Cosa Si Intende per "Testo Grande"?

WCAG definisce il testo grande come 18 punti (24 pixel) o più grande, o 14 punti in grassetto (circa 18.67 pixel in grassetto) o più grande. I titoli, i pulsanti di chiamata all'azione e il testo principale spesso rientrano nella categoria di testo grande, il che significa che possono superare con un rapporto di contrasto inferiore rispetto al testo principale. Tuttavia, mirare a un rapporto di almeno 4.5:1 ovunque è comunque una buona pratica perché garantisce coerenza e protegge il design contro il ridimensionamento e lo zoom.

Perché la Formula Utilizza la Luminanza Relativa

La formula di contrasto WCAG non è un semplice confronto dei valori RGB. Converte prima ogni colore in luminanza relativa — una misura della luminosità percepita che pondera il verde più pesantemente del rosso o del blu perché gli occhi umani sono più sensibili alla luce verde. Questo è il motivo per cui due colori con valori di luminosità identici in RGB possono produrre rapporti di contrasto molto diversi. Un rosso puro (#FF0000) e un verde puro (#00FF00) entrambi hanno intensità massima in un canale, ma il verde appare molto più luminoso agli occhi umani, quindi la sua luminanza relativa è più alta.

Funzionalità Principali

Funzionalità	Cosa Fa	Perché è Importante
Calcolo del Contrasto in Tempo Reale	Calcola istantaneamente il rapporto WCAG mentre modifichi i colori	Itera tra le opzioni della palette e vedi l'aggiornamento della conformità immediatamente
Test WCAG AA & AAA	Mostra pass/fail per testo normale, testo grande e componenti dell'interfaccia utente a entrambi i livelli	Sappi esattamente quali standard soddisfi senza dover memorizzare i limiti
Anteprima del Testo in Tempo Reale	Rende esempi di testo principale e titoli grandi con i tuoi colori	Giudica la leggibilità visivamente, non solo matematicamente
Scambio dei Colori	Inverte primo piano e sfondo con un clic	Testa le varianti luce su oscurità e oscurità su luce istantaneamente
Inserimento Codice HEX	Accetta codici HEX diretti per un abbinamento di colori preciso	Abbinare esattamente i colori del marchio dal tuo sistema di design
Copia del Rapporto	Copia il rapporto di contrasto nel clipboard	Documenta la conformità all'accessibilità nelle specifiche del design e nelle verifiche
Priorità alla Privacy	Tutti i calcoli vengono eseguiti nel tuo browser	Nessun dato di design viene inviato a qualsiasi server

A differenza degli strumenti di contrasto base che mostrano solo un numero, questo verificatore mette il rapporto in contesto. Non vedi solo che la tua combinazione ha un rapporto di 4.2:1, ma che fallisce AA per il testo principale mentre supera per il testo grande — informazioni azionabili che ti aiutano a decidere se scurire il testo o aumentare la dimensione del carattere.

Caso d'Uso Reale

Progettisti Web che Creano Interfacce Accessibili Un progettista sta creando una pagina di atterraggio con uno sfondo nero scuro e testo grigio chiaro. La combinazione sembra elegante sul loro monitor, ma il verificatore di contrasto rivela un rapporto di soli 3.8:1 — fallendo AA per il testo principale. Il progettista schiarisce leggermente il testo, raggiungendo 4.6:1, e ora la pagina è leggibile per gli utenti con vista ridotta senza sacrificare l'estetica scura.

Sviluppatori che Implementano Sistemi di Design Un sviluppatore gestisce una libreria di componenti con decine di token di colore. Prima di rilasciare un nuovo tema, esegue ogni coppia di testo e sfondo attraverso il verificatore di contrasto. Cogliere i fallimenti in anticipo impedisce ai bug di accessibilità di raggiungere la produzione e evita il costoso rilavoro di ridisegnare componenti dopo un'audizione.

Creatori di Contenuti che Formattano Documenti Un marketer crea una guida PDF con caselle di commento colorate e testo evidenziato. Utilizza il verificatore di contrasto per verificare che ogni colore del testo su ogni sfondo superi WCAG AA. Questo garantisce che il PDF sia accessibile quando viene convertito in HTML o letto da lettori di schermo, e protegge l'organizzazione da reclami legati all'accessibilità.

PM che Eseguono Audizioni di Accessibilità Un PM sta preparandosi per una revisione del modello VPAT (Voluntary Product Accessibility Template). Utilizza il verificatore di contrasto per testare ogni combinazione di colori nell'applicazione rispetto agli standard WCAG, documentando i rapporti per ciascuno. Questo crea un tracciato di audit che dimostra la diligenza e la conformità.

Insegnanti che Creano Materiali Didattici Un insegnante costruisce un corso online con slide, quiz e materiali di lettura. Verifica ogni combinazione di testo e sfondo per garantire che gli studenti con problemi visivi possano partecipare in modo equo. Un alto contrasto beneficia anche gli studenti che guardano lezioni su smartphone o tablet in condizioni di illuminazione variabili.

Progettisti di App Mobile Gli schermi mobili vengono visualizzati ovunque — all'aperto sotto il sole, all'interno sotto luci fluorescenti e in letto con il modo notturno attivo. Un verificatore di contrasto aiuta i progettisti a considerare queste condizioni variabili assicurando che le combinazioni abbiano abbastanza margine per rimanere leggibili quando la luminosità è bassa, gli schermi sono sporchi o vengono applicati filtri anti-riflesso.

Consigli e Buone Pratiche

• Mirare a AAA quando possibile. Sebbene AA sia il minimo legale in molte giurisdizioni, AAA fornisce un'esperienza migliore per tutti. Se i colori del tuo marchio possono raggiungere 7:1 senza scontrarsi, utilizzali. Il piccolo compromesso visivo è giustificato dal grande guadagno di accessibilità.
• Non affidarti solo al colore. Anche con un perfetto contrasto, il colore non è accessibile per tutti. Gli utenti colorblind potrebbero non distinguere il rosso dal verde. Combina sempre il colore con icone, etichette, pattern o testo per comunicare il significato.
• Testa l'intera palette. Un sistema di design potrebbe avere dieci colori del testo e dieci colori di sfondo. Questo è un centinaio di combinazioni possibili. Testare sistematicamente ogni coppia — o almeno le più comuni — impedisce che i fallimenti di accessibilità si insinuino.
• Verifica gli stati di focus e gli elementi interattivi. I pulsanti, i collegamenti, i campi di form e i commutatori devono avere almeno un rapporto di contrasto 3:1 rispetto all'area circostante. Un pulsante che passa per il testo potrebbe fallire come componente dell'interfaccia utente se il bordo è troppo sottile.
• Considera la trasparenza e gli overlay. Se il tuo testo si trova su un'immagine o un overlay semitrasparente, lo sfondo effettivo è una miscela di colori. Il verificatore di contrasto testa i colori solidi, quindi per gli overlay devi calcolare il risultato mescolato prima o testare conservativamente.
• Testa a diversi livelli di zoom. Gli utenti con vista ridotta zoomano fino al 200% o più. A un alto zoom, il testo appare più grande, il che aiuta, ma il contrasto relativo rimane lo stesso. Assicurati che i tuoi rapporti siano sufficientemente forti per resistere all'ingrandimento.
• Documenta i tuoi rapporti. Quando finalizzi una coppia di colori, registra il rapporto di contrasto nella documentazione del sistema di design. Questo aiuta i futuri designer e sviluppatori a mantenere l'accessibilità mentre il prodotto evolve.

Domande Frequenti

Il Verificatore di Contrasto è gratuito da utilizzare?

Sì. Il Verificatore di Contrasto è completamente gratuito senza limiti di utilizzo, senza registrazione e senza pubblicità. Puoi testare quante combinazioni di colori ti servono.

Cosa è WCAG?

WCAG sta per Web Content Accessibility Guidelines. È uno standard internazionale pubblicato dal W3C che definisce come rendere il contenuto web accessibile alle persone con disabilità. La versione attuale è WCAG 2.1, e WCAG 2.2 aggiunge ulteriori criteri. Le linee guida sono organizzate in tre livelli: A (minimo), AA (standard) e AAA (migliorato).

Qual è il rapporto di contrasto necessario per superare WCAG AA?

Per testo normale (sotto 18pt o 14pt in grassetto), è necessario almeno 4.5:1. Per testo grande (18pt o più grande, o 14pt in grassetto o più grande) e componenti dell'interfaccia utente come pulsanti e campi di form, è necessario almeno 3:1.

Qual è la differenza tra WCAG AA e AAA?

AA è il livello di conformità standard richiesto da molte leggi e linee guida sull'accessibilità in tutto il mondo, inclusi Section 508 negli Stati Uniti e l'European Accessibility Act. AAA è un livello migliorato che fornisce un'accessibilità maggiore ma non è richiesto ovunque e talvolta è considerato eccessivamente rigoroso per il contenuto web generale. Per AAA, il testo normale richiede un rapporto di 7:1 e il testo grande richiede 4.5:1.

Posso testare colori RGB o HSL?

Lo strumento accetta direttamente l'inserimento di codici HEX. Se hai valori RGB o HSL, utilizza prima il nostro Color Picker per convertirli in HEX. Inserisci il codice HEX nel Verificatore di Contrasto e testa immediatamente.

Questo strumento funziona sui dispositivi mobili?

Sì. Il Verificatore di Contrasto è completamente risponsivo e funziona su smartphone e tablet. I selettori di colore, il testo di anteprima e la tabella dei risultati sono ottimizzati per schermi touch e schermi più piccoli.

Posso utilizzarlo per il design stampato?

Sebbene WCAG sia progettato specificamente per il contenuto digitale, i principi del contrasto si applicano anche alla stampa. Un rapporto di 4.5:1 o superiore garantisce in genere testo leggibile nei materiali stampati. Tuttavia, i progettisti per la stampa dovrebbero considerare anche la copertura dell'inchiostro, la qualità della carta e la distanza di visione, oltre ai rapporti di contrasto digitali.

Cosa succede se i colori del mio marchio non superano WCAG?

Se i colori del tuo marchio non soddisfano il rapporto richiesto, hai diverse opzioni. Schiarisci o scurisci leggermente il testo. Aumenta la dimensione del carattere in modo che il testo venga considerato "testo grande", che richiede un rapporto inferiore. Aggiungi un'ombra o un contorno al testo per aumentare il contrasto percepito. Oppure utilizza il colore non conforme solo per elementi decorativi e scegli un'alternativa accessibile per il testo funzionale.