Contrast Checker WCAG
Verifica il rapporto di contrasto tra colori secondo le linee guida WCAG 2.1. Controlla la conformità AA e AAA per garantire accessibilità.
Verifica Contrasto
Testo normale (16px)
Testo grande (24px / 18px bold)
AA richiede 4.5:1, AAA richiede 7:1
AA richiede 3:1, AAA richiede 4.5:1
WCAG 2.1 richiede minimo 3:1
Come utilizzare Contrast Checker WCAG
Scegli il colore del testo (Foreground)
Clicca sul selettore colore o digita il codice esadecimale nel campo di testo per impostare il colore del testo. Puoi anche usare il pulsante frecce per scambiare i due colori rapidamente.
Scegli il colore dello sfondo (Background)
Imposta il colore di sfondo con il secondo selettore. Il rapporto di contrasto viene calcolato automaticamente non appena cambi uno dei due colori.
Leggi il rapporto di contrasto e il livello WCAG
Il pannello centrale mostra il rapporto numerico (es. 7.32:1) e il badge del livello WCAG raggiunto: "WCAG AAA" (massima accessibilità), "WCAG AA" (standard consigliato) o "Non conforme". Il verde indica conformità, il rosso indica che i colori non soddisfano i requisiti minimi.
Verifica la conformità per tipo di contenuto
La griglia di conformità mostra separatamente i risultati per testo normale (minimo 4.5:1 per AA, 7:1 per AAA), testo grande sopra 24px o 18px bold (minimo 3:1 per AA) e componenti UI come bordi e icone (minimo 3:1).
Applica i suggerimenti automatici o usa i preset
Se il contrasto non è sufficiente, il pannello "Suggerimenti per migliorare" propone colori alternativi con contrasto sufficiente. Clicca su un suggerimento per applicarlo. Usa i preset nella barra laterale per caricare combinazioni di colori note come GitHub Dark o Material Blue.
Suggerimenti
- Usa il pulsante di scambio (frecce) per invertire foreground e background: spesso basta invertire i colori per migliorare notevolmente il contrasto.
- Il testo grande (oltre 24px o 18px bold) ha requisiti di contrasto più bassi: se stai progettando intestazioni, puoi usare colori con rapporto 3:1 invece di 4.5:1.
- Il preset "Low Contrast" è incluso intenzionalmente come esempio di coppia di colori non conforme, utile per vedere come appare il badge "Non conforme".
Domande frequenti
Cos'è il rapporto di contrasto WCAG e perché è importante per l'accessibilità?
Il rapporto di contrasto WCAG misura la differenza di luminosità tra testo e sfondo su una scala da 1:1 (nessun contrasto) a 21:1 (massimo contrasto). Le linee guida WCAG 2.1 richiedono almeno 4.5:1 per testo normale (livello AA) e 7:1 per il livello AAA, garantendo leggibilità per persone con ipovisione o daltonismo.
Qual è la differenza tra WCAG AA e WCAG AAA per il contrasto dei colori?
Il livello AA è il requisito minimo raccomandato per la maggior parte dei siti web: richiede 4.5:1 per testo normale e 3:1 per testo grande (oltre 24px o 18px bold). Il livello AAA è il più restrittivo: richiede 7:1 per testo normale e 4.5:1 per testo grande, ed è consigliato per contenuti critici o pubblico anziano.
Come si calcola il contrasto tra due colori secondo WCAG 2.1?
La formula WCAG 2.1 usa la luminosità relativa (relative luminance) di ciascun colore, calcolata dalla linearizzazione dei valori RGB. Il rapporto è (L1 + 0.05) / (L2 + 0.05) dove L1 è il colore più chiaro. Questo strumento esegue il calcolo automaticamente con la formula ufficiale.
Il mio sito deve essere obbligatoriamente conforme WCAG?
In molti paesi la conformità WCAG AA è obbligatoria per i siti della pubblica amministrazione e fortemente raccomandata per tutti. In Italia il D.Lgs. 106/2018 richiede accessibilità WCAG 2.1 livello AA per i siti pubblici. Per i siti privati è una buona pratica che migliora l'esperienza utente e il SEO.
Come scelgo colori accessibili per il mio design mantenendo l'estetica?
Inizia dal colore primario del tuo brand e usa i suggerimenti automatici di questo strumento per trovare varianti più scure o più chiare che superino il 4.5:1. Testa sempre le combinazioni con i preset inclusi come GitHub Dark, che sono già conformi WCAG AA, per ispirazione.