Verificatore contrasto colori

Controlla il contrasto del testo normale e grande tra i colori di primo piano e di sfondo.

Verificatore contrasto colori

Un risultato generato nel browser per pianificazione e riferimento.

Primo pianoSfondo

CSS / HEX

GUIDA

Cosa controllare prima di usarlo

Quando questo strumento è utile

Usalo prima di pubblicare i colori di primo piano e sfondo per testo del corpo, etichette o pulsanti. Inserisci due colori HEX per vedere il loro rapporto di contrasto e i risultati delle soglie per testo normale e testo grande.

Come viene prodotto il risultato

Il calcolo linearizza i canali sRGB, ricava la luminanza relativa e divide la luminanza più chiara più 0.05 per la luminanza più scura più 0.05. Confronta il rapporto con le soglie del testo 3:1, 4.5:1 e 7:1.

Esempio pratico e interpretazione

Inserire il primo piano #111111 su sfondo #FFFFFF produce un rapporto elevato. Controlla prima AA normal per testo piccolo; per una combinazione destinata ai titoli grandi, consulta anche il risultato AA large.

Ambito e limitazioni

Ottenere un rapporto non completa una revisione di accessibilità. Prova la dimensione e il peso reali del carattere, gli stati interattivi, il testo posto sopra immagini e tutte le informazioni comunicate solo dal colore.

Domande frequenti

Come posso spostare un colore dal Controllo contrasto colori in un'altra app?

Usa il pulsante copia sotto il risultato per copiare testo CSS, HEX o HSL. Verifica che l'app di destinazione interpreti lo stesso formato colore.

Il colore dello schermo dal Controllo contrasto colori corrisponderà alla stampa?

Non automaticamente. Gli schermi RGB emissivi e la carta/ink di stampa riflettente usano gamut e modelli di miscelazione diversi, quindi restano necessari profili di stampa e prove.

Posso approvare un design token solo dal Controllo contrasto colori?

Usalo come candidato, quindi verifica lo sfondo reale, la modalità scura, gli stati interattivi e il contrasto del testo prima di assegnare un nome e approvare un token.