Verificatore Contrasto Colori

Testa la conformita del contrasto WCAG 2.1 AA/AAA per un web design accessibile

Verificatore Contrasto Colori

Colore di Primo Piano (Testo)

Colore di Sfondo

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?

Scegli i Colori

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

Controlla i Risultati

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

Applica i Suggerimenti

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

Domande Frequenti

Le WCAG (Web Content Accessibility Guidelines) sono lo standard internazionale per l'accessibilita del web, pubblicato dal W3C. I requisiti di rapporto di contrasto garantiscono che il testo sia leggibile per gli utenti con problemi visivi, daltonismo o disabilita cognitive. La non conformita a WCAG 2.1 rappresenta anche un problema legale in molti paesi, ai sensi di leggi come l'ADA (USA), EN 301 549 (UE) e l'Equality Act (UK).

Livello AA (minimo): il testo normale richiede 4.5:1, il testo grande richiede 3:1. Livello AAA (avanzato): il testo normale richiede 7:1, il testo grande richiede 4.5:1. Il testo grande e definito come 18pt (24px) o piu in peso normale, o 14pt (circa 18.67px) o piu in grassetto. La maggior parte delle organizzazioni mira al livello AA; AAA e raccomandato per contenuti critici come testi medici o legali.

La formula WCAG e: (L1 + 0.05) / (L2 + 0.05), dove L1 e la luminanza relativa del colore piu chiaro e L2 quella del piu scuro. La luminanza relativa viene calcolata dai valori RGB con correzione gamma. Il bianco puro (1.0) contro il nero puro (0.0) fornisce il rapporto massimo di 21:1. Questo strumento esegue il calcolo completo istantaneamente.

Testo di almeno 18pt (24px) in peso normale, o di almeno 14pt (circa 18.67px) in grassetto. Il testo grande ha un requisito di contrasto piu permissivo (3:1 per AA) perche i caratteri piu grandi sono piu facili da leggere a contrasto ridotto. Un font in grassetto da 16px e considerato testo grande.

Quando i tuoi colori non soddisfano i requisiti di contrasto, lo strumento suggerisce automaticamente colori alternativi di primo piano o sfondo che mantengono una tonalita simile ma regolano la luminosita per rispettare WCAG AA. Clicca su un suggerimento per applicarlo istantaneamente, senza dover indovinare manualmente i valori di luminosita HSL.

Il range va da 1:1 (nessun contrasto — colori identici) a 21:1 (massimo — nero puro su bianco puro). Un rapporto di 4.5:1 significa che il colore piu chiaro e 4.5 volte piu luminoso di quello piu scuro. Esempi comuni: nero su bianco = 21:1, grigio scuro su bianco = 7-15:1, grigio medio su bianco = 3-5:1 (borderline), grigio chiaro su bianco = spesso sotto 3:1 (non superato).

Lo strumento utilizza colori HEX solidi, che e l'approccio corretto per i test di conformita WCAG. Le WCAG richiedono di verificare il colore finale renderizzato come percepito dall'utente. Se usi la trasparenza rgba, verifica il colore effettivamente mescolato (come appare il testo sul suo sfondo reale), non il codice colore trasparente stesso.

No. Tutti i calcoli vengono eseguiti localmente nel tuo browser tramite JavaScript. Nessun valore di colore viene trasmesso ad alcun server.

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

Selettore di Colori

Selettore di colori avanzato con conversioni HEX, RGB, HSL, HSV, CMYK e controllo contrasto

Convertitore HEX a RGB

Convertire tra formati colore HEX, RGB e HSL

Questo strumento ti è stato utile?

Verificatore Contrasto Colori