# Verifica contrasto colori Confronta qui un colore del testo con un colore di sfondo secondo le WCAG 2.2, oppure inserisci l’indirizzo di una pagina per trovare ogni testo sotto il contrasto minimo, con i colori misurati e il colore conforme più vicino. ## Cosa controlla questo strumento - Il rapporto WCAG di due colori qualsiasi: Il calcolatore usa la formula della luminanza relativa delle definizioni delle WCAG 2.2 e mostra il risultato per testo normale, testo grande e componenti dell’interfaccia, ai livelli AA e AAA. Funziona nel tuo browser. - Un colore conforme, calcolato per te: Quando una coppia non supera il controllo, trova il colore del testo più vicino con la stessa tonalità che raggiunge 4.5:1 o 7:1, così modifichi il meno possibile il tuo design. - Ogni testo a basso contrasto di una pagina: L’analisi della pagina esegue la regola color-contrast di axe-core in un vero browser Chrome ed elenca ogni elemento non conforme con il colore del testo, il colore di sfondo, la dimensione del carattere e il rapporto. - Raggruppati per coppia di colori: Gli errori sono raggruppati per colore del testo e dello sfondo, perché una sola modifica a un colore del tema di solito corregge tutti gli elementi che lo usano. - La soglia giusta per il testo grande: Il testo di almeno 24 pixel, o di 18,66 pixel in grassetto, richiede 3:1 invece di 4.5:1. L’analisi applica a ogni elemento la soglia corretta in base alla dimensione e allo spessore calcolati. - Cosa non è riuscita a misurare, e perché: Il testo sopra immagini, sfumature o elementi sovrapposti viene elencato a parte con il motivo, così sai esattamente cosa controllare a occhio. ## Cosa non può controllare - Misurare il testo sopra foto, sfumature o video. Un software non può sapere quale parte di un’immagine si trova dietro ogni lettera, quindi questi testi vengono elencati perché tu li controlli. - Controllare gli stati hover, focus o altri stati. L’analisi vede la pagina così come viene caricata; controlla quei colori con il calcolatore. - Analizzare icone, bordi e campi dei moduli della pagina per il criterio WCAG 1.4.11. Il calcolatore mostra il risultato a 3:1 per qualsiasi coppia inserisci. - Leggere il testo che fa parte di un’immagine, come un banner con le parole incorporate nell’immagine. - Testare più della pagina che inserisci. La scansione gratuita completa testa fino a cinque pagine chiave. ## Perché è importante Il contrasto insufficiente è l’errore di accessibilità più comune sul web. L’analisi 2026 di WebAIM sul primo milione di home page ha trovato testo a basso contrasto sull’83,9% di esse, con una media di 34 occorrenze per pagina. Un testo poco marcato è difficile da leggere per le persone ipovedenti o con un deficit nella visione dei colori, e per chiunque usi il telefono in pieno sole. Il criterio di successo 1.4.3 delle WCAG 2.2, di livello AA, fissa il minimo a 4.5:1 per il testo normale e a 3:1 per il testo grande. È anche uno dei problemi meno costosi da correggere: sulla maggior parte dei siti una manciata di colori del tema causa quasi tutti gli errori, e modificarli corregge tutte le pagine in una volta. ## Come leggere i risultati - Rapporto di contrasto: Da 1:1 (lo stesso colore due volte) a 21:1 (nero su bianco). I rapporti sono arrotondati per difetto, quindi una coppia che mostra 4.49:1 non raggiunge il minimo di 4.5:1. - Testo normale, AA (4.5:1): Il minimo per il testo del corpo, i link, le etichette e il testo dei pulsanti secondo il criterio WCAG 1.4.3. - Testo grande, AA (3:1): Per il testo di almeno 24 pixel, o di 18,66 pixel in grassetto. Le WCAG definiscono testo grande quello di 18 punti, o di 14 punti in grassetto. - AAA (7:1 e 4.5:1): Il livello avanzato del criterio WCAG 1.4.6. Non è necessario per la conformità AA, ma aiuta più lettori. - Icone, bordi e campi dei moduli (3:1): Il criterio WCAG 1.4.11 chiede un rapporto di 3:1 rispetto ai colori adiacenti per le parti dei controlli e della grafica che le persone devono vedere per usarli. - Testo non conforme: Ogni elemento che l’analisi ha misurato sotto la sua soglia, con selettore, colori, dimensione e rapporto. Aprine uno per vederne il markup e, se disponibile, uno screenshot. - Da controllare a occhio: Il testo che axe-core non è riuscito a misurare, con il motivo, per esempio un’immagine o una sfumatura dietro di esso. ## Come correggere i problemi più comuni - Testo grigio su bianco: #767676 è più o meno il grigio più chiaro che raggiunge 4.5:1 sul bianco (4.54:1). Grigi più chiari come #999999 (2.84:1) sono una causa frequente di errori in footer, didascalie, placeholder e prezzi. - Testo bianco su un pulsante con il colore del brand: Se il testo bianco sul colore del tuo brand non supera il controllo, scurisci di qualche tono lo sfondo del pulsante o usa un testo scuro. Controlla anche i colori di hover e focus, che spesso diventano più chiari. - Testo segnaposto nei moduli: Il testo segnaposto (placeholder) è comunque testo e richiede 4.5:1. Meglio ancora, usa un’etichetta visibile sopra il campo, così il segnaposto non è l’unica istruzione. - Testo sopra immagini e slider: Metti il testo su uno sfondo pieno o semitrasparente, oppure aggiungi una sovrapposizione scura all’immagine, poi controlla la parte più chiara dell’immagine che si trova dietro il testo. - Badge delle offerte e caratteri piccoli: Il testo dei controlli disabilitati è esentato dal criterio 1.4.3, ma i badge delle offerte, i prezzi e le note legali in caratteri piccoli no. Spesso sono il testo più chiaro delle pagine di un negozio. ## Domande frequenti ### Quale rapporto di contrasto richiedono le WCAG? Per il livello AA, 4.5:1 per il testo normale e 3:1 per il testo grande (criterio di successo 1.4.3), e 3:1 per i componenti dell’interfaccia e la grafica significativa (1.4.11). Il livello AAA chiede 7:1 e 4.5:1 (1.4.6). ### Cosa si intende per testo grande? Le WCAG definiscono testo di grandi dimensioni quello di almeno 18 punti, o di 14 punti in grassetto. In pixel CSS corrisponde a circa 24px, o 18,66px in grassetto. ### I loghi devono rispettare il contrasto minimo? No. Il criterio WCAG 1.4.3 esenta i logotipi e il testo che fa parte di un logo o di un marchio, oltre al testo puramente decorativo e al testo dei controlli inattivi. ### Perché l’analisi mette tra i punti da controllare il testo sopra un’immagine? axe-core misura colori pieni. Quando dietro il testo si trova un’immagine, una sfumatura o un altro elemento, non può sapere quali colori si incontrano, quindi segnala l’elemento perché lo controlli una persona invece di tirare a indovinare. ### Mi serve il contrasto AAA? Il livello AAA non è richiesto per la conformità di livello AA, e il W3C non raccomanda di richiedere il livello AAA per interi siti. Raggiungere 7:1 per il testo del corpo resta comunque una buona pratica quando il design lo consente. ### L’APCA fa parte delle WCAG? No. L’APCA è un metodo diverso per calcolare il contrasto, discusso per le WCAG 3, che sono ancora una bozza. Oggi la conformità si misura con il rapporto delle WCAG 2 calcolato da questo strumento. ## Fonti - [W3C: guida al criterio di successo 1.4.3 Contrast (Minimum) delle WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: guida al criterio di successo 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: guida al criterio di successo 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: definizione di luminanza relativa nelle WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: regola color-contrast di axe-core](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)