Verifica Contrasto Colori
Verifica il rapporto di contrasto dei colori per l'accessibilità WCAG. Testa colori di primo piano e sfondo.
The quick brown fox jumps over the lazy dog
Testo corrente a 16px: è questo che i tuoi visitatori leggeranno davvero.
Linee guida di accessibilità WCAG
AA Normal (4.5:1): Contrasto minimo per il testo normale. Richiesto per la maggior parte dei contenuti web.
AA Large (3:1): Contrasto minimo per testo grande (18pt+ o 14pt+ grassetto).
AAA Normal (7:1): Contrasto migliorato per testo normale. Standard di accessibilità più elevato.
AAA Large (4.5:1): Contrasto migliorato per testo grande. Consigliato per contenuti critici.
Predefiniti
Cronologia
Linee guida di accessibilità WCAG
Il verificatore di contrasto colori ti aiuta a garantire che il tuo sito web soddisfi gli standard di accessibilità WCAG.
Strumenti popolari
Informazioni su Verifica Contrasto Colori
Imposta un colore di primo piano e uno di sfondo con il codice esadecimale o il selettore di colori e questo verificatore riporta il rapporto di contrasto WCAG 2.1, con l'esito positivo o negativo per AA testo normale (4,5:1), AA testo grande (3:1), AAA normale (7:1) e AAA grande (4,5:1). Un campione dal vivo mostra la coppia nelle dimensioni di un titolo e del corpo del testo, proprio ciò che serve ai designer prima di approvare una palette. Il calcolo della luminanza relativa avviene nel tuo browser e le coppie salvate restano nel local storage.
Casi d'uso
Come usare
Imposta il colore del testo nel campo Foreground, usando il selettore di colore oppure digitando un valore esadecimale come #4f46e5 nella casella accanto.
Imposta allo stesso modo il colore della pagina nel campo Background: la grande anteprima Aa si ridisegna all'istante e il badge con il rapporto in alto a destra si aggiorna.
Leggi le quattro schede WCAG sotto l'anteprima - AA Normal, AA Large, AAA Normal e AAA Large - ognuna con un segno di spunta verde o una croce rossa rispetto alla propria soglia.
Premi le frecce di scambio tra i due campi colore per provare la combinazione invertita, oppure scegli un preset come White on Dark o GitHub Dark per caricare un abbinamento già collaudato.
Premi Copy sotto il numero grande del rapporto per copiare negli appunti il valore e tutti e quattro gli esiti, superati o non superati, oppure premi Save per conservare la coppia nella striscia History.
Suggerimenti Pro
- Incolla il contenuto direttamente: il Verificatore di Contrasto Colori riconosce i formati di input più comuni e applica automaticamente impostazioni sensate.
- Usa le scorciatoie da tastiera (Ctrl/Cmd+A per selezionare tutto, Ctrl/Cmd+C per copiare) per velocizzare il tuo lavoro nel Verificatore di Contrasto Colori.
- Se l'input è molto grande, suddividilo in blocchi: la maggior parte delle schede del browser gestisce megabyte di testo, ma l'analisi di contenuti enormi può bloccare l'interfaccia per qualche istante.
- Il Verificatore di Contrasto Colori non registra né conserva ciò che inserisci. Se ti serve uno storico, copia i risultati importanti in un file locale o in un'app per appunti.
- Combina il Verificatore di Contrasto Colori con gli altri strumenti del sito (formattatori, convertitori, encoder) per creare flussi di lavoro completi senza mai uscire dal browser.
Domande frequenti
Sì, è completamente gratuito: nessuna registrazione, nessuna chiave API, nessuna filigrana e nessun limite di utilizzo.
No. Il Verificatore di Contrasto Colori funziona interamente lato client, nel tuo browser. Ciò che inserisci non tocca mai i nostri server.
Non c'è un limite rigido, ma con input superiori a qualche megabyte è normale un rallentamento, a seconda della memoria del tuo dispositivo.
Sì. I risultati generati con il Verificatore di Contrasto Colori sono tuoi e puoi usarli liberamente in qualsiasi progetto personale o commerciale.
Gran parte della logica gira in JavaScript lato client, quindi dopo il primo caricamento puoi spesso continuare a lavorare senza connessione a internet.
Nessuno. Poiché il Verificatore di Contrasto Colori funziona nel tuo browser, puoi elaborare tutti gli input che il tuo hardware consente, senza chiavi API né limitazioni.