Contrast checker e verifica contrasto colori
Lo strumento Verifica contrasto colori è un contrast checker che calcola all'istante il rapporto di contrasto tra qualsiasi colore di primo piano e lo sfondo. Inserendo i valori nei campi dedicati, visualizzi subito se la combinazione soddisfa le soglie WCAG 2.1 AA e AAA sia per il testo normale che per il testo grande. L'elaborazione avviene interamente nel browser, senza inviare dati a server esterni o richiedere la creazione di un account.
Come usare il contrast checker online
Per controllare l'accessibilità visiva dei tuoi elementi di design bastano pochi passaggi:
- Inserisci un codice esadecimale a 3 o 6 cifre nel campo del colore del testo oppure selezionalo tramite il campionario visivo.
- Imposta il colore di sfondo incollando il relativo valore HEX o utilizzando la tavolozza nativa del tuo dispositivo.
- Controlla i risultati: il valore numerico del rapporto, l'anteprima in tempo reale del testo e i quattro badge di verifica si aggiornano all'istante.
Puoi fare clic sul pulsante Inverti colori per scambiare immediatamente la tinta del testo con quella dello sfondo.
Calcolo contrasto colori e requisiti WCAG 2.1
Le linee guida WCAG 2.1 definiscono due livelli principali di conformità basati sulla formula della luminanza relativa dello standard W3C. Il livello AA richiede un rapporto di almeno 4,5:1 per il testo normale e di 3,0:1 per il testo grande. Il livello AAA impone requisiti più severi: 7,0:1 per il testo normale e 4,5:1 per il testo grande.
Per testo grande si intende un carattere di dimensione pari ad almeno 18pt (24px) a peso normale, oppure 14pt (18,66px) con peso in grassetto. Lo strumento verifica tutte e quattro le soglie contemporaneamente, indicando dove il criterio risulta Superato.
Verifica contrasto colori con codici esadecimali
I campi accettano stringhe di 3 o 6 cifre esadecimali (comprese tra 0–9 e A–F). Eventuali caratteri non validi vengono ignorati ed è possibile incollare direttamente valori che includono il simbolo # iniziale, poiché viene rimosso in automatico.
Se preferisci scegliere una tonalità in modo visivo, toccando il campionario del colore si apre il selettore colore nativo del tuo sistema operativo. I due campi di input rimangono sempre sincronizzati.
Contrasto testo sfondo e accessibilità web
Garantire un adeguato contrasto testo sfondo è fondamentale per rendere i contenuti leggibili a chiunque, compresi gli utenti con ipovisione o daltonismo, oppure chi consulta lo schermo di uno smartphone sotto la luce diretta del sole.
Utilizzare un color contrast checker accessibility consente a designer e sviluppatori di correggere i problemi relativi al contrasto accessibilità colori direttamente durante la fase di progettazione grafica su Figma o durante la stesura del codice CSS.
Color contrast checker chrome extension e strumenti browser
A differenza di una color contrast checker chrome extension o di uno scanner per intere pagine web, questo strumento funziona direttamente nel browser senza richiedere l'installazione di componenti aggiuntivi. Non occorre registrare un profilo né inviare moduli di richiesta.
L'intero calcolo viene eseguito localmente sul dispositivo dell'utente, offrendo un riscontro immediato, riservato e privo di attese ad ogni variazione dei valori cromatici.
Domande frequenti
Qual è il rapporto di contrasto minimo richiesto per il livello WCAG AA?
Il livello WCAG 2.1 AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e di 3,0:1 per il testo grande. Il testo grande è definito a partire da 18pt (24px) a peso normale o 14pt (18,66px) in grassetto. Lo strumento mostra contemporaneamente sia le soglie AA sia quelle AAA.
Che differenza c'è tra i livelli di conformità WCAG AA e AAA?
Il livello AA rappresenta lo standard di riferimento generale per l'accessibilità web, mentre il livello AAA impone requisiti più severi. Per il testo normale, il livello AA richiede un rapporto di 4,5:1 mentre il livello AAA richiede 7,0:1. Per il testo grande, il livello AA richiede 3,0:1 mentre il livello AAA richiede 4,5:1.
Cosa si intende esattamente per testo grande nelle linee guida WCAG?
Nelle linee guida WCAG 2.1, il testo è considerato grande se ha una dimensione di almeno 18pt (circa 24px) con peso normale, oppure di almeno 14pt (circa 18,66px) con peso in grassetto. Tutti i caratteri di dimensioni inferiori rientrano nella categoria del testo normale.
Come posso verificare il contrasto tra il colore del testo e lo sfondo online?
Puoi inserire un codice esadecimale a 3 o 6 cifre nei campi del testo e dello sfondo oppure utilizzare il selettore colore visivo. Il valore del rapporto e i badge di conformità si aggiornano istantaneamente ad ogni modifica, senza premere alcun pulsante.
Posso controllare il contrasto inserendo direttamente un codice esadecimale (HEX)?
Sì, entrambi i campi accettano codici esadecimali da 3 o 6 cifre (0–9, A–F). Lo strumento ignora i caratteri non validi e rimuove automaticamente l'eventuale simbolo cancelletto iniziale.
Questo strumento di verifica invia i dati o i colori a un server esterno?
No, tutte le operazioni ed i calcoli del contrasto avvengono interamente all'interno del browser dell'utente. Nessun codice colore o dato personalizzato viene inviato a server esterni.
Come funziona il tasto per invertire il colore del testo e dello sfondo?
Premendo il pulsante Inverti colori, il valore esadecimale del colore del testo e quello del colore di sfondo vengono scambiati all'istante tra loro. Questo comando è utile per verificare al volo varianti grafiche invertite.
Perché garantire un buon contrasto di colore è fondamentale per l'accessibilità web?
Un contrasto adeguato garantisce la leggibilità dei contenuti per le persone con disabilità visive, ipovisione o daltonismo. Rende inoltre il testo facilmente leggibile su schermi mobili esposti a forte luce solare.
Consigliati
-
Interaction of Color (Josef Albers)La guida fondamentale per capire come i colori cambiano in base allo sfondo.
-
Don't Make Me Think, Revisited (Steve Krug)Oltre al contrasto c'è di più: un testo intramontabile sull'usabilità dei siti web.
-
Nix Mini 3 Sensore ColoreScansiona vernici o tessuti per trovarne il codice HEX e testalo subito qui.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
