Controllo contrasto
Controlla il contrasto per WCAG
Come usare Controllo contrasto
Controlla il contrasto per WCAG Strumento gratuito online, senza registrazione, senza pubblicità invasiva. Usalo ora.
Perché il contrasto dei colori è importante?
Circa l'8% degli uomini e lo 0,5% delle donne hanno una qualche forma di deficit nella visione dei colori. Inoltre, le persone leggono in condizioni difficili — forte luce solare, schermi di bassa qualità, stanchezza o occhi che invecchiano. Un contrasto di colore sufficiente garantisce che i vostri contenuti siano leggibili per tutti gli utenti, indipendentemente dalle loro condizioni visive.
- Conformità all'accessibilità web: Le WCAG 2.1 (Web Content Accessibility Guidelines) definiscono i rapporti minimi di contrasto. In Italia, la Legge Stanca (L. 4/2004) e il successivo D.Lgs. 106/2018 rendono obbligatoria l'accessibilità digitale per i siti web delle pubbliche amministrazioni e di molti soggetti privati.
- Revisione del design: Verificate le combinazioni di colori testo/sfondo durante la fase di design, prima dello sviluppo. È molto meno costoso correggere i problemi di contrasto in Figma che dopo il lancio del sito.
- Librerie di componenti: Assicuratevi che ogni combinazione di colori nel vostro design system soddisfi i requisiti di accessibilità in tutti i contesti di utilizzo.
- Modalità scura: Nell'implementare la modalità scura, i colori che funzionavano su sfondi chiari spesso falliscono su sfondi scuri. Ogni modalità necessita di una verifica del contrasto indipendente ed esaustiva.
- Visualizzazione dati: Assicuratevi che i colori dei grafici siano distinguibili dagli utenti con daltonismo e leggibili su diversi colori di sfondo — importante per le dashboard e i report aziendali.
Livelli WCAG: Il livello A è il minimo assoluto. Il livello AA (rapporto ≥ 4,5:1 per il testo normale, ≥ 3:1 per il testo grande) è lo standard legale nella maggior parte delle giurisdizioni e il livello obiettivo per la maggior parte dei siti web. Il livello AAA (rapporto ≥ 7:1) è per la massima accessibilità.
Frequently Asked Questions
Quale rapporto di contrasto richiede WCAG AA?
WCAG AA richiede un rapporto minimo di contrasto di 4,5:1 per il testo normale (sotto 18pt o 14pt in grassetto) e 3:1 per il testo grande (18pt o più, o 14pt in grassetto o più). I componenti dell'interfaccia e gli elementi grafici (icone, bordi dei moduli) richiedono 3:1. Questi sono minimi — un contrasto superiore è sempre meglio per la leggibilità generale.
Come viene calcolato il rapporto di contrasto?
Rapporto di contrasto = (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del più scuro. La luminanza viene calcolata dai valori RGB lineari secondo una formula specifica. Il contrasto massimo è 21:1 (nero su bianco). Un rapporto di 1:1 significa nessun contrasto — colori identici.
Il rapporto di contrasto si applica al testo colorato su sfondo colorato?
Sì — la formula WCAG confronta la luminanza relativa, non solo la luminosità percepita. Il testo rosso su sfondo verde può avere un contrasto basso anche se entrambi i colori sono vivaci. Testate sempre le combinazioni di colori reali — non fidatevi dell'intuizione visiva perché la luminanza percepita può ingannare.
Qual è la differenza tra contrasto dei colori e daltonismo?
Il rapporto di contrasto misura le differenze di luminanza — influisce su tutti gli utenti, inclusi quelli con una visione normale dei colori (specialmente con molta luce o su schermi di bassa qualità). Il daltonismo influisce su come vengono distinti i colori, non necessariamente sulla loro luminanza. Un design ad alto contrasto che usa solo rosso e verde supera il test di luminanza ma può essere indistinguibile per gli utenti daltonici.
Il peso del carattere influisce sui requisiti di contrasto?
Sì. Il testo in grassetto e il testo grande hanno requisiti minimi più bassi perché sono intrinsecamente più facili da leggere. WCAG AA richiede 3:1 per il testo di 18pt (24px) o più, o 14pt (circa 18,67px) in grassetto. Per il testo più piccolo o non in grassetto, il requisito è 4,5:1.
Verificatore di contrasto vs simulatore di daltonismo vs audit di accessibilità
Un verificatore di contrasto controlla il rapporto di luminanza tra due colori specifici. Un simulatore di daltonismo (Coblis, DevTools di Chrome) mostra come appare un design con i vari tipi di deficit della visione dei colori. Un audit di accessibilità completo (axe, Lighthouse, WAVE) scansiona un'intera pagina per tutte le violazioni WCAG. Per un'accessibilità completa: verificate il contrasto durante la fase di design, simulate il daltonismo prima del lancio ed eseguite gli audit automatizzati sul sito di produzione.