Contrasto dei colori

Con Contrasto dei colori, designer e sviluppatori front-end possono valutare i colori prima di approvarne l’accessibilità. Misura il contrasto WCAG tra due colori.

Misura il contrasto WCAG tra due colori. Lo strumento è gratuito nel browser e mostra il risultato senza richiedere un account.

Come si usa

Inserisci il colore di sfondo, ad esempio come codice esadecimale.
Aggiungi il colore del testo o dell'elemento che vuoi confrontare con quello sfondo.
Esegui il controllo per ottenere il rapporto di contrasto tra i due colori.
Leggi le soglie WCAG mostrate per testo normale, testo grande ed elementi dell'interfaccia.
Prova un'altra coppia di colori se il primo risultato non soddisfa le tue esigenze.

Esempio

L'esempio confronta un colore scuro con uno chiaro. Lo strumento calcola il rapporto di contrasto e mostra le soglie WCAG pertinenti. Controlla se il rapporto è sufficiente per testo normale, testo grande o elementi dell'interfaccia, poi prova un'altra coppia se il tuo sistema di progettazione lo consente. Il risultato ti aiuta a decidere prima di pubblicare.

Input

#0F172A
#FFFFFF

Limiti e formati

Lo strumento confronta due colori, non la reale leggibilità di un'immagine o di una foto.
Trasparenza, sfumature e sovrapposizioni non sono sempre rappresentate.
Un buon rapporto da solo non convalida ogni aspetto di accessibilità di una pagina.
Controlla separatamente i colori degli stati hover, attivo e disabilitato.
I valori visualizzati vanno interpretati in base alla dimensione e allo scopo del testo.

Dove avviene il trattamento

Tutto il calcolo del contrasto avviene nel tuo browser. I codici colore che inserisci restano sul tuo dispositivo e non vengono inviati da nessuna parte. Il risultato appare subito dopo il controllo. Puoi cancellare i campi o chiudere la scheda senza conservare quei valori.

Domande frequenti

A quale rapporto dovrei puntare per il testo del corpo?

Le soglie WCAG dipendono dalla dimensione e dallo scopo del testo. Per il testo normale, il livello AA di solito richiede un contrasto maggiore rispetto al testo grande. Leggi le indicazioni mostrate dallo strumento per il tuo caso specifico e controlla ogni stile di testo separatamente.

Posso usare nomi di colori come rosso o blu?

Il campo accetta valori che lo strumento può leggere, in particolare codici colore esadecimali. Se un nome non viene riconosciuto, sostituiscilo con il suo codice esadecimale equivalente e ripeti il controllo.

Lo strumento controlla il contrasto su uno screenshot?

No, calcola il contrasto tra due colori inseriti. Non legge un'immagine o una pagina completa. Per un modello, annota i codici colore usati e prova separatamente ogni coppia importante.