English
Español
Português
Français
Deutsch
Italiano
Turco
IndonesianoContrasto Checker
Verifica se la combinazione di testo e sfondo e accessibile. Scegli i colori a mano con le finestre colore, usa le preimpostazioni Bianco o Nero, oppure carica un'immagine e clicca un pixel. Voti WCAG AA e AAA immediati.
Trascina qui la tua immagine
oppure clicca per sfogliare, funziona anche trascina e incolla
Solo URL diretti di immagini, devono terminare con .jpg, .png, .gif, .webp o .svg
Fai clic sull'immagine o sulla palette per impostare come Testo
Rapporto di contrasto
5.20 : 1
Buon contrasto
Valutazioni WCAG
La volpe bruna e veloce salta sopra il cane pigro, testo normale 16px.
Testo grande 24px grassetto
Caricamento immagine...
Cos'è la verifica del contrasto?
Testo leggibile per tutti
Il rapporto di contrasto misura quanto il testo si distingue dallo sfondo, da 1:1 (stesso colore) a 21:1 (nero su bianco). Il nostro verificatore usa la formula WCAG di luminanza relativa, lo stesso standard usato da revisori e design system.
Punta ad almeno 4.5:1 per il testo normale (AA), 3:1 per il testo grande e 7:1 per AAA. Testa i colori del brand, gli stili dei pulsanti o qualsiasi testo su immagine prima di pubblicare.
Come si usa
01
Scegli i colori
Digita l'HEX, usa la finestra colore nativa oppure premi le preimpostazioni Bianco, Nero o Casuale. Cambia quando vuoi.
02
Oppure prendi da immagine
Clicca l'icona immagine, carica qualsiasi JPG, PNG o WebP, poi clicca l'immagine o la sua palette estratta. Commuta il target Testo o Sfondo.
03
Pubblica una UI accessibile
Leggi il rapporto, i voti AA e AAA e l'anteprima dal vivo.
04
Condividi ed esporta
Copia l'URL (?text=…&bg=…) per condividere la coppia esatta, Copia CSS per la consegna, oppure Scarica il rapporto TXT.
Esempi reali
Testo corpo 16px: #767676 su #FFFFFF (4.54:1 promosso) contro #999999 (2.85:1 bocciato)
Il controllo reale numero 1. Il testo grigio secondario sembra pulito ma i grigi chiari bocciano. Prova entrambe le coppie sopra: scurisci il testo tenue a #767676 o #595959 per superare AA. Il testo lungo più piccolo richiede tutti i 4.5:1.
Etichette pulsanti: bianco su blu
Il controllo UI più testato. I blu vivaci (circa 3.9:1) promuovono solo il testo grande. Scurisci i riempimenti a circa 5-6:1 per le etichette di dimensione normale. Testa separatamente gli stati normale, hover e disabilitato.
Link dentro il testo corpo
Gli utenti incollano blu link più sfondo corpo per vedere se i link indicati solo dal colore raggiungono 4.5:1. Altrimenti, scurisci il link o aggiungi la sottolineatura (il solo colore non deve essere l'unico segnale).
Input, bordi e testo piccolo 13px
Bordi degli input, caselle e note da 13px sono dove il contrasto muore. Bordi e UI richiedono 3:1. Le didascalie da 13px richiedono 4.5:1 come il corpo. Incolla qui il tuo grigio bordo più lo sfondo campo.
Titoli 24-32px e grafica
Il testo grande (24px e oltre, o 19px grassetto e oltre) richiede solo 3:1, come icone, tratti dei grafici e anelli di focus. Testa titoli, icone e linee dei grafici come coppie separate dal corpo.
Testo su foto e gradienti
Caso immagine principale: carica l'hero, clicca i pixel più chiari e più scuri dietro il titolo. Se uno boccia, aggiungi un velo o un'ombra testo e ritesta il colore fuso. Non testare mai un solo punto di un gradiente.