Verificare uno screenshot di cui non hai la sorgente — pagina marketing, UI di un competitor, PDF. Auditare un logo su sfondo fotografico movimentato dove il "colore di sfondo" non è un singolo valore. Controllare il peggior caso di contrasto lungo un gradiente o dietro testo traslucido. Confrontare rapidamente due stati UI (es. button rest vs hover) senza ricostruire il design.

Anti-aliasing. I bordi del testo si mediano in colori fuori dal design intent. Clicca al centro del tratto di una lettera, non sul bordo. Compressione JPEG. Le immagini molto compresse hanno drift di colore in zone piatte. La media 5×5 ammorbidisce. Layer traslucidi. Quello che conta per il contrasto è il pixel renderizzato, non il colore sorgente. Questo strumento legge il pixel renderizzato — esattamente quello che vuoi. Controlli i colori, non l'intent. Se il tuo button passa AA a riposo ma fallisce su hover in un altro screenshot, entrambi gli stati sono bug a11y. Scaling dell'immagine. Lo strumento ridimensiona immagini grandi per performance. Il pixel campionato riflette il pixel mostrato; per sampling pixel-perfect di un elemento molto piccolo, croppa prima di caricare.

Verificatore di contrasto su immagine

Clicca due punti qualsiasi in un'immagine per controllare il contrasto WCAG — AA, AAA, soglie testo grande. Pensato per designer che verificano screenshot reali, non solo codici hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Risultato

Sample two colours to see the contrast ratio.

A cosa serve?

I contrast checker WCAG normalmente chiedono due codici hex — ma un designer che fa un giro di accessibilità su uno screenshot reale non ha hex, ha pixel. Questo strumento ti lascia caricare un'immagine (screenshot, hero design, logo su sfondo movimentato) e cliccare due punti. Campiona il colore sotto il cursore (1 pixel o media 3×3/5×5) e calcola il rapporto di contrasto WCAG 2.1. Verdetto per AA, AA-grande, AAA, AAA-grande e soglia componenti UI (1.4.11). Tutto nel browser.

Quando usarlo

Verificare uno screenshot di cui non hai la sorgente — pagina marketing, UI di un competitor, PDF.
Auditare un logo su sfondo fotografico movimentato dove il "colore di sfondo" non è un singolo valore.
Controllare il peggior caso di contrasto lungo un gradiente o dietro testo traslucido.
Confrontare rapidamente due stati UI (es. button rest vs hover) senza ricostruire il design.

Come funziona il campionamento

Un sample 1-pixel è preciso ma rumoroso — bordi antialiasati, artefatti JPEG e rendering subpixel fanno divergere i vicini. La media 5×5 è di solito quello che vuoi su UI: restituisce il colore che un umano descriverebbe, non l'esatto pixel sotto il click. Usa 1px per un bordo logo o un confine di colore netto.

Errori comuni

Anti-aliasing. I bordi del testo si mediano in colori fuori dal design intent. Clicca al centro del tratto di una lettera, non sul bordo.
Compressione JPEG. Le immagini molto compresse hanno drift di colore in zone piatte. La media 5×5 ammorbidisce.
Layer traslucidi. Quello che conta per il contrasto è il pixel renderizzato, non il colore sorgente. Questo strumento legge il pixel renderizzato — esattamente quello che vuoi.
Controlli i colori, non l'intent. Se il tuo button passa AA a riposo ma fallisce su hover in un altro screenshot, entrambi gli stati sono bug a11y.
Scaling dell'immagine. Lo strumento ridimensiona immagini grandi per performance. Il pixel campionato riflette il pixel mostrato; per sampling pixel-perfect di un elemento molto piccolo, croppa prima di caricare.