Verificatore Contrasto Colore Gratis: WCAG AA AAA Accessibilità Online

A AA: 4.5:1 normale, 3:1 grande. AAA: 7:1 e 4.5:1.

A Linee guida accessibilità contenuti web.

A Scurisci testo o schiarisci sfondo.

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.