ESC

Verificatore Contrasto Colori

Rapporto di Contrasto
21:1
AA Testo Normale
Superato
AA Testo Grande
Superato
AAA Testo Normale
Superato
AAA Testo Grande
Superato

Anteprima dal Vivo

Anteprima Testo Grande (18pt+) Ecco come apparira il testo normale del corpo (14px) con la combinazione di colori scelta. Assicura un contrasto sufficiente per la leggibilita.

Alternative Accessibili

Tutti i livelli di contrasto superati! Nessun suggerimento necessario.

Requisiti WCAG 2.1

Livello Normale Grande
AA 4.5:1 3:1
AAA 7:1 4.5:1
Tutta lelaborazione avviene nel tuo browser. Nessun dato viene inviato a nessun server.

Funzionalita

Conformita WCAG 2.1

Testa i livelli AA e AAA per testo normale e grande secondo le linee guida ufficiali WCAG 2.1

Anteprima dal Vivo

Visualizza la tua combinazione di colori in tempo reale con testo di esempio a diverse dimensioni

Suggerimenti Intelligenti

Ottieni automaticamente alternative di colori accessibili quando la tua combinazione non soddisfa i requisiti di contrasto

Privacy Prioritaria

Tutti i calcoli vengono effettuati localmente nel tuo browser, nessun dato inviato ai server

Come Usare?

1

Scegli i Colori

Inserisci i colori di primo piano (testo) e sfondo usando il selettore colori o i campi di input HEX.

2

Controlla i Risultati

Visualizza il rapporto di contrasto e lo stato di conformita WCAG AA/AAA per testo normale e grande.

3

Applica i Suggerimenti

Se il contrasto non e sufficiente, clicca su un alternativa di colore accessibile suggerita per applicarla istantaneamente.

Domande Frequenti

Misura la differenza di luminosita tra due colori, da 1:1 (nessun contrasto) a 21:1 (massimo). Piu alto il rapporto, migliore la leggibilita.

AA richiede 4.5:1 per testo normale e 3:1 per grande. AAA e piu severo: 7:1 e 4.5:1. La maggior parte dei siti punta ad AA.

No. Tutti i calcoli avvengono nel tuo browser con JavaScript. Nulla esce dal tuo computer.

Cose il Verificatore di Contrasto?

Uno strumento che ti dice se i tuoi colori di testo e sfondo rispettano gli standard di accessibilita WCAG 2.1. Scegli due colori e vedi subito se passano i livelli AA e AAA per testo normale e grande. Se non passano, lo strumento suggerisce alternative accessibili applicabili con un clic.

Perche il contrasto conta

Il basso contrasto e uno dei problemi di accessibilita piu comuni sul web. Colpisce persone con problemi di vista, daltonismo e anche chi usa il dispositivo sotto il sole. Rispettare le WCAG non e solo buona pratica, spesso e un obbligo legale.

Come usarlo

Inserisci i colori di primo piano e sfondo tramite codice HEX o selettore colori. Lo strumento calcola il rapporto istantaneamente e mostra superato o non superato per ogni livello WCAG. Se il contrasto e basso, consulta la sezione suggerimenti.

Consigli per designer

Testa la palette colori allinizio del processo di design, non a sito finito. Testo scuro su sfondo chiaro funziona bene di solito. Evita di trasmettere informazioni solo attraverso il colore.

Privacy

Tutto gira nel tuo browser. Nessun dato colore viene inviato a server. Nessun account, nessun tracciamento.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura

Passo Successivo