Verificatore Contrasto Colore Gratis: WCAG AA AAA Accessibilità Online

A No, questo strumento funziona solo con coppie di colori solidi. Per le immagini serve altro software. Fai uno screenshot dell'area e usa un contagocce per campionare i pixel più chiari e più scuri sotto il testo. Testa entrambi contro il colore del testo. Se uno fallisce, aggiungi un overlay semitrasparente dietro il testo — un nero al 40% di opacità di solito funziona bene.

A Sì, puoi inserire colori in HEX, RGB o HSL. Basta incollare il valore nel campo — lo strumento rileva automaticamente il formato. Ad esempio, scrivi 'rgb(255, 0, 0)' o 'hsl(0, 100%, 50%)' e funziona all'istante. Utile quando prendi i colori direttamente dal codice CSS.

A Sì. Inserisci prima la coppia predefinita, poi sostituisci separatamente i colori hover. WCAG richiede che anche gli stati hover e focus rispettino i contrasti minimi — non solo il testo statico. Ad esempio, se lo sfondo del tuo pulsante passa da #007bff a #0056b3 al passaggio del mouse, testali entrambi contro il testo bianco. Un errore comune: i designer schiariscono troppo gli sfondi hover, rovinando il contrasto.

A Anche gli elementi non testuali necessitano di contrasto, ma con regole leggermente diverse. Le WCAG richiedono un rapporto 3:1 per componenti dell'interfaccia e oggetti grafici come icone, pulsanti e bordi dei form. Testa qui il colore dell'icona sullo sfondo. Se il rapporto è sotto 3:1, non supera il livello AA. Un trucco: usa lo stesso colore del testo per le icone e spesso passano.

A Non fidarti dei tuoi occhi — sono pessimi nel giudicare il contrasto. Due colori che ti sembrano ok potrebbero raggiungere solo 2,5:1, fallendo persino WCAG AA. Questo strumento calcola matematicamente, considerando la percezione umana del colore e la luminanza. Per esempio, un grigio chiaro #C0C0C0 su bianco #FFFFFF sembra leggibile ma totalizza appena 1,6:1. Verifica sempre con il nostro indicatore di superamento/fallimento.

A Sì, eccome. Il livello AA richiede 4,5:1 per testo normale sotto 18px, ma solo 3:1 per testo grande (18px grassetto o 24px normale). L'AAA esige 7:1 per testo normale e 4,5:1 per testo grande. Se il tuo titolo da 32px ottiene 4,0:1, supera AA ma fallisce AAA. Il nostro strumento mostra entrambe le soglie all'istante. Consiglio pratico: punta ad AA per il corpo del testo e ad AAA per i titoli – la loro dimensione rende più facile ottenere il rapporto più alto.

A La calibrazione del monitor e il tipo di pannello influenzano la resa, ma il rapporto è matematica pura. Un punteggio di 4,5:1 significa che la differenza di luminanza è reale, non solo percepita. Se sembra slavato, di solito è la luminosità dello schermo, non il contrasto. Prova su un secondo dispositivo o regola il profilo colore del sistema. Consiglio pratico: passa al profilo sRGB dalle impostazioni del sistema operativo, è lo standard per il web design. Vedrai una resa molto più vicina a quella dell'utente medio.

A Il sole non cambia la matematica, ma cambia cosa risulta comodo. Il livello AA di 4,5:1 è il minimo, ma all'aperto vuoi più margine. Punta a 7:1 (AAA) per qualsiasi testo letto per più di qualche secondo. Per icone o timestamp guardati rapidamente, 3:1 può bastare, ma prova la tua palette su un telefono vero con luminosità al massimo. Una coppia a 2,9:1 diventa invisibile fuori, anche se passa sul tuo monitor.

A Nessun limite, nessuna registrazione, nessuna quota giornaliera. Che siano 5 coppie o 500, ogni risultato compare in meno di un secondo con il rapporto esatto e il verdetto AA/AAA. Nulla viene salvato, quindi la tua palette di brand resta nel browser. Una designer che conosco ha provato 40 combinazioni prima di trovare un accento accessibile per un cliente. Salvala tra i preferiti e usala come bozza durante il lavoro sulla palette.

A Questo metodo di solito fallisce. Un nero al cinquanta percento su sfondo bianco crea un grigio sbiadito che non supera i parametri WCAG. Testa sempre la sfumatura mista risultante direttamente nel nostro strumento. Inserisci il valore RGB esatto del colore finale per ottenere subito un verdetto preciso.