Inserisci colori HEX o seleziona colori Pantone per primo piano e sfondo.
Controlla il rapporto di contrasto e i risultati WCAG AA o AAA per testo normale, testo grande e componenti UI.
Usa l'anteprima live, inverti i colori, copia il CSS o prova i suggerimenti Pantone accessibili.

Casi d'uso della verifica contrasto

Convalida le coppie di colori del brand prima di usarle in layout digitali.
Controlla pulsanti, moduli, navigazione e altri componenti UI per un contrasto leggibile.
Confronta palette ispirate a Pantone prima di adattare colori di stampa agli schermi.
Documenta i risultati WCAG per revisioni di accessibilità e passaggi di consegne al design.

Verifica contrasto colore per workflow WCAG, UI e Pantone

Usa questo strumento quando devi confermare che un colore del testo, uno sfondo, uno stato di pulsante o una palette di brand sia leggibile prima di inserirlo in un sito, un'app, una presentazione o un design system.

Leggere correttamente il risultato WCAG

Lo strumento calcola la luminanza relativa di entrambi i colori e restituisce il rapporto di contrasto usato da WCAG. Il testo normale richiede di solito 4.5:1 per AA e 7:1 per AAA, mentre testo grande e componenti UI essenziali hanno soglie più basse.

Collegare colori Pantone e accessibilità digitale

I colori Pantone sono spesso scelti per brand e stampa, ma i loro equivalenti su schermo devono comunque essere verificati. Cerca nomi Pantone o valori HEX, visualizza la coppia e confronta alternative accessibili prima della consegna a design o sviluppo.

Un flusso pratico per designer e sviluppatori

Parti dai valori HEX esatti del file di design, prova primo piano e sfondo in entrambe le direzioni, copia il CSS o il rapporto e conserva la coppia conforme con il resto della documentazione della palette Pantone.

FAQ sulla verifica del contrasto

Che cosa misura questo strumento?

Misura il rapporto di contrasto di luminanza tra un colore di primo piano e uno di sfondo, poi confronta il risultato con le soglie WCAG.

Quali sono i requisiti di contrasto WCAG AA e AAA?

WCAG AA richiede almeno 4.5:1 per testo normale e 3:1 per testo grande o componenti UI. WCAG AAA richiede 7:1 per testo normale e 4.5:1 per testo grande.

I colori Pantone possono essere verificati per l'accessibilità web?

Sì. I riferimenti Pantone possono essere convertiti in valori colore per schermo e poi verificati per il contrasto digitale. Controlla sempre i colori finali nel mezzo in cui appariranno.

Avviso sul contrasto

I risultati sono calcolati da valori digitali e servono alla pianificazione dell'accessibilità. Stampa fisica, materiali, illuminazione e calibrazione dei display possono cambiare il contrasto percepito.