Verificare contrasto colori secondo WCAG AA e AAA

Controlla subito se la combinazione di colori soddisfa i requisiti di accessibilità per testi.

Rapporto di contrasto

Testo grande — Titolo in grassetto 24px

Testo normale 15px. La maggior parte dei contenuti richiede la conformità AA a questo livello.

Come funziona il calcolo del contrasto

Il tool richiede l’inserimento di due valori colore, solitamente il colore del testo e quello dello sfondo. Utilizza la formula WCAG 2.1 per determinare la luminanza relativa di ciascun colore e calcola il rapporto di contrasto tra i due.

Il risultato viene confrontato con i livelli di accessibilità previsti per testi normali e grandi. Puoi così sapere immediatamente se la combinazione scelta soddisfa gli standard AA o AAA.

Limiti e consigli per un uso corretto

Il calcolatore analizza solo coppie di colori: non verifica automaticamente il contrasto per elementi grafici, icone o testi su immagini. Se hai gradienti o immagini di sfondo, è necessario campionare manualmente il colore predominante.

Il sistema non rileva la dimensione o il peso del font, quindi occorre specificare manualmente se il testo è considerato 'grande' o 'bold'.

Perché è importante rispettare gli standard WCAG

I rapporti di contrasto sono fondamentali per garantire la leggibilità dei contenuti a tutti gli utenti, inclusi quelli con deficit visivi. WCAG fissa soglie precise: 4,5:1 e 3:1 rispettivamente per testi normali e grandi (livello AA), e 7:1 e 4,5:1 per il livello AAA.

Un contrasto adeguato migliora l’usabilità dell’interfaccia, favorisce l’inclusività e riduce il rischio di errori o difficoltà di lettura.

Domande frequenti

Come capire se un testo è 'grande' ai fini del contrasto?

Un testo è considerato 'grande' se ha almeno 24px di altezza oppure 19px se è in grassetto. Questo consente di applicare soglie di contrasto più basse secondo WCAG.

Posso verificare il contrasto per elementi come pulsanti o icone?

Sì, inserendo manualmente i colori di primo piano e sfondo degli elementi, il tool calcolerà il contrasto. Tuttavia, il controllo si limita a coppie di colori pieni.

Come si comporta il tool con i colori semi-trasparenti?

Il calcolo si basa su colori pieni. Se usi trasparenze, è consigliato campionare il colore risultante visivamente, perché il contrasto effettivo può variare secondo il contesto.

Il tool tiene conto dei profili colore o delle differenze tra dispositivi?

No, il calcolo avviene secondo lo standard WCAG, senza adattamenti per profili colore o variazioni di schermo. Per risultati certi, verifica sempre su dispositivi e ambienti reali.

Posso testare più combinazioni di colori contemporaneamente?

Il tool è pensato per controllare una coppia alla volta, per massima precisione. Puoi ripetere rapidamente il test cambiando i colori inseriti.

Quanto è affidabile il calcolo rispetto alla leggibilità reale?

La formula WCAG fornisce una valutazione oggettiva del contrasto, ma la percezione può variare. Per testi particolari o design complessi, è consigliato affiancare test pratici.

Qualcosa non va o hai un'idea per questo strumento? Scrivici