Strumento online gratuito per controllare il contrasto. Misura il rapporto di contrasto WCAG AA/AAA, verifica l'accessibilità web. Elaborato nel browser.
Primo piano
Sfondo
21.00:1
Rapporto di contrasto
Testo normale
AA (4.5:1)Superato
AAA (7:1)Superato
Testo grande
AA (3:1)Superato
AAA (4.5:1)Superato
Anteprima
Ma la volpe col suo balzo ha raggiunto il quieto Fido 1234567890
Ma la volpe col suo balzo ha raggiunto il quieto Fido 1234567890
Premi Ctrl+D per aggiungere questa pagina ai preferiti
Verifica del contrasto cromatico online gratuita che testa il rapporto di contrasto tra due colori rispetto agli standard di accessibilità WCAG 2.
Come usare Controllo contrasto colori?
Inserisci i colori del primo piano (testo) e dello sfondo.
Controlla il rapporto di contrasto e il livello WCAG (AA/AAA).
Regola i colori secondo necessità per soddisfare gli standard.
Domande frequenti su Controllo contrasto colori
Qual è la differenza tra WCAG AA e AAA?
L'AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. L'AAA è più rigoroso, con 7:1 e 4,5:1 rispettivamente.
Cosa faccio se il mio rapporto di contrasto non passa?
Schiarisci o scurisci i colori per aumentare il contrasto. Lo strumento mostra i risultati in tempo reale mentre regoli.
Il testo grande ha una soglia più bassa: da quale dimensione è considerato grande?
Le WCAG considerano grande il testo da 18pt (circa 24px) con peso normale, o da 14pt (circa 18,7px) in grassetto. Soddisfare questo requisito abbassa la soglia AA da 4,5:1 a 3:1. Ricorda però che sono minimi, non obiettivi: il testo del corpo deve restare leggibile su uno schermo di portatile abbassato o alla luce del giorno, quindi puntare vicino a 7:1 è l'abitudine più sicura.
Come verifico il contrasto di un testo su una foto o un pannello traslucido?
Il calcolo del contrasto presuppone due colori piatti, quindi su una fotografia devi campionare il punto più chiaro e quello più scuro sotto il testo ed eseguire la verifica due volte. Se uno dei due non passa, il testo sparisce in qualche punto dell'immagine. In pratica, stendere una fascia a tinta unita dietro il testo è più affidabile di un velo nero traslucido o di un'ombra, entrambi dipendenti da ciò che sta sotto.
Consigli per usare Controllo contrasto colori efficacemente
Il testo corrente richiede 4,5:1; da 18pt o 14pt in grassetto bastano 3:1 per il livello AA.
In Italia le linee guida AgID rimandano agli stessi rapporti di contrasto delle WCAG.
Anche elementi non testuali come icone e bordi dei campi vogliono 3:1 sullo sfondo.