Strumento gratuito: Accessibilità

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.

Calcolatore di contrasto

Inserisci un colore del testo e un colore di sfondo. Tutto viene calcolato nel tuo browser.

Il testo normale a 16 pixel appare così.

Testo grande a 24 pixel

Il bordo di un pulsante

Rapporto di contrasto4.54:1

Risultati WCAG 2.2 per questi colori
Testo normale, AAWCAG 1.4.3, richiede 4.5:1Superato
Testo grande, AAWCAG 1.4.3, richiede 3:1Superato
Testo normale, AAAWCAG 1.4.6, richiede 7:1Non superato
Testo grande, AAAWCAG 1.4.6, richiede 4.5:1Superato
Icone, bordi e campi dei moduliWCAG 1.4.11, richiede 3:1Superato

Colori del testo conformi più vicini su questo sfondo

Per testo grande si intende un testo di almeno 24 pixel, o di 18,66 pixel in grassetto. I rapporti sono arrotondati per difetto, quindi 4.499:1 viene mostrato come 4.49:1 e non supera il controllo, come previsto dalle WCAG.

Oppure analizza una pagina per trovare il testo a basso contrasto

Gratis. Controlla l’indirizzo che inserisci in circa 20 secondi.

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.

Contrasto dei colori insufficiente: perché è importante e come correggerlo su Shopify, WooCommerce e qualsiasi sito

Domande su questo strumento

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

Strumenti correlati

Il Report Accessibilità ($174, una tantum) parte dalla scansione gratuita completa e aggiunge altre pagine, la modifica da fare per ogni problema rilevato, un PDF e nuovi test per verificare le tue correzioni.

Informazioni sul Report Accessibilità