Contrast checker WCAG
Scegli due colori e verifica in tempo reale se il loro contrasto rispetta WCAG 2.1 AA e AAA, per testo e interfaccia. Formula normativa, calcolo nel browser.
Gratuito davvero. Nessuna registrazione, nessuna email, nessun limite, nessun cookie. Non salviamo l'URL che analizzi.
Titolo di esempio
Testo di esempio 0123456789 abcdefghijkl
«Testo grande» = almeno 24px, oppure 18,66px se in grassetto. AA è il livello richiesto dall'European Accessibility Act (WCAG 2.1). AAA è il grado più rigoroso, non obbligatorio ma consigliato per testi lunghi.
Cosa questo strumento non può vedere
Il contrasto è una condizione necessaria ma non sufficiente per l'accessibilità: uno strumento verifica i colori, non se il testo sia leggibile in ogni contesto (immagini di sfondo, sovrapposizioni, stati). Per un quadro completo del sito usa la verifica accessibilità.
A cosa serve e come leggerlo
Il contrasto tra testo e sfondo è tra i requisiti di accessibilità più frequenti e più facili da misurare: un contrasto insufficiente rende un sito difficile da leggere per molte persone, non solo chi ha problemi di vista, ma chiunque guardi uno schermo sotto il sole. Il rapporto va da 1:1 (colori identici) a 21:1 (nero su bianco). Le soglie che contano: 4,5:1 per il testo normale e 3:1 per il testo grande e gli elementi di interfaccia, per raggiungere il livello AA richiesto dall'European Accessibility Act.
Questo strumento applica la formula normativa WCAG sulla luminanza relativa: lo stesso calcolo che usano gli audit professionali, eseguito qui in tempo reale nel tuo browser mentre scegli i colori.
Colore e tipografia: i due pilastri visivi
Il contrasto risolve metà del problema della leggibilità; l'altra metà è la tipografia: dimensioni, gerarchia, ritmo verticale. Se stai definendo il design system del tuo sito e ti serve costruire una scala tipografica coerente e armoniosa, uno strumento dedicato e ben fatto è typescaler.com: contrasto qui, scala tipografica là, e la base visiva del tuo sito è solida.
Domande frequenti
›Come si calcola il rapporto di contrasto WCAG?
Si linearizza ogni canale sRGB dei due colori, si calcola la luminanza relativa (L = 0,2126·R + 0,7152·G + 0,0722·B sui valori linearizzati) e si applica la formula (L_chiaro + 0,05) / (L_scuro + 0,05). Il risultato va da 1:1 (nessun contrasto) a 21:1 (nero su bianco). Questo strumento usa esattamente questa formula, non un'approssimazione.
›Quale contrasto minimo serve per essere a norma?
Per WCAG 2.1 livello AA, quello richiesto dall'European Accessibility Act, serve almeno 4,5:1 per il testo normale e 3:1 per il testo grande e gli elementi grafici/UI. Il livello AAA, più rigoroso, chiede 7:1 per il testo normale e 4,5:1 per quello grande.
›Cosa conta come «testo grande»?
Testo di almeno 24px (circa 18pt), oppure 18,66px (circa 14pt) se in grassetto. Per il testo grande la soglia è più permissiva perché le forme più ampie restano leggibili anche con un contrasto minore.
›Il calcolo avviene sui miei dati?
No: tutto avviene nel tuo browser, in tempo reale. Non inviamo i colori a nessun server e non salviamo nulla. Puoi usarlo anche offline una volta caricata la pagina.