Verifica contrasto colori
Controlla il rapporto di contrasto WCAG tra un colore del testo e uno di sfondo — visualizza i giudizi AA/AAA per testo normale, testo grande e componenti UI, con anteprima live e suggerimenti di colori accessibili.
La rapida volpe bruna
Il testo grande si legge comodamente quando il contrasto è sufficiente.
Questo è un paragrafo di esempio di testo corpo normale. Un buon contrasto cromatico mantiene i tuoi contenuti leggibili per tutti, incluse le persone con visione ridotta o daltonismo. un link di esempio.
Caratteri piccoli e didascalie sono i più difficili da leggere — richiedono il maggiore contrasto.Tutto viene calcolato in tempo reale nel tuo browser usando la formula di luminanza relativa WCAG 2.x — nessun upload, nessuna registrazione, completamente gratuito.
Informazioni su Verifica contrasto colori
Il Verificatore di Contrasto Colori misura il rapporto di contrasto WCAG tra un colore di testo e uno di sfondo, poi valuta la coppia rispetto ai livelli di accessibilità AA e AAA per testo normale, testo grande e componenti UI. Il rapporto e ogni verdetto di superamento o fallimento si aggiornano in tempo reale mentre regoli i colori.
Un pannello di anteprima realistico mostra titoli, testo del corpo, testo piccolo, un pulsante e un link nella combinazione scelta, così puoi giudicare la leggibilità con contenuti reali invece che con campioni astratti. Quando una coppia fallisce, lo strumento suggerisce il colore di testo accessibile più vicino che raggiunge la soglia AA di 4,5:1, pronto da applicare con un clic.
La matematica segue la formula WCAG 2.x della luminanza relativa e gira interamente nel tuo browser: nulla viene caricato e i controlli sono gratuiti. Puoi anche copiare un report testuale compatto del rapporto e dei risultati da incollare in una revisione di accessibilità o in una pull request.
Come usare Verifica contrasto colori
- Imposta il colore del testo e il colore di sfondo con i selettori o digitando i valori.
- Leggi il rapporto di contrasto e i risultati AA/AAA per testo normale, testo grande e componenti UI.
- Ispeziona l'anteprima dal vivo per vedere titoli, paragrafi, pulsanti e link reali nei tuoi colori.
- Se la coppia fallisce, applica il colore di testo accessibile suggerito oppure scambia i due colori.
- Clicca su "Copia report" per condividere il rapporto e i risultati di conformità.