In questo articolo
Cos'e il contrasto dei colori e perche e importante
Il contrasto dei colori e la differenza di luminanza tra due colori, tipicamente il testo in primo piano e il suo sfondo. Un contrasto sufficiente garantisce che il testo sia leggibile da tutti, comprese le persone con ipovisione o daltonismo. Un contrasto scarso rende i contenuti difficili o impossibili da leggere, escludendo milioni di utenti.
Le Linee guida per l'accessibilita dei contenuti web (WCAG) definiscono rapporti di contrasto minimi che garantiscono la leggibilita per un'ampia gamma di capacita visive. Rispettare questi standard non e solo una buona pratica — e un requisito legale in molte giurisdizioni in base alle leggi sull'accessibilita come ADA, EAA ed EN 301 549.
Come funzionano i rapporti di contrasto WCAG
WCAG utilizza la luminanza relativa per calcolare i rapporti di contrasto tra due colori. La formula produce un rapporto da 1:1 (nessun contrasto, colori identici) a 21:1 (contrasto massimo, nero su bianco).
- La luminanza relativa viene calcolata dai valori sRGB linearizzati con la formula: L = 0.2126R + 0.7152G + 0.0722B
- Il rapporto di contrasto e (L1 + 0.05) / (L2 + 0.05) dove L1 e il colore piu chiaro e L2 il piu scuro
- Il testo normale (sotto 18pt o 14pt grassetto) richiede almeno 4.5:1 per AA e 7:1 per AAA
Prova gratuitamente — nessuna registrazione richiesta
Controlla il contrasto →Livelli di conformita WCAG AA vs AAA
WCAG definisce due livelli di conformita per il contrasto dei colori. Il livello AA e lo standard minimo richiesto dalla maggior parte delle normative sull'accessibilita, mentre AAA fornisce un'accessibilita migliorata per utenti con menomazioni visive piu gravi.
- AA testo normale — richiede un rapporto di contrasto di almeno 4.5:1 per testo inferiore a 18pt (o 14pt grassetto)
- AA testo grande — richiede almeno 3:1 per testo di 18pt e superiore (o 14pt grassetto e superiore)
- AAA testo normale — richiede almeno 7:1 per il massimo livello di leggibilita
- AAA testo grande — richiede almeno 4.5:1 per testo grande al livello migliorato
- Contrasto non testuale — componenti UI e oggetti grafici richiedono almeno 3:1 rispetto ai colori adiacenti
Consigli per un design dei colori accessibile
Progettare con l'accessibilita in mente non significa sacrificare l'estetica. Questi consigli pratici aiutano a creare design belli che tutti possano utilizzare.
- Inizia dal contrasto — scegli prima i colori del testo e dello sfondo, poi costruisci la palette attorno
- Non affidarti mai solo al colore — usa icone, pattern o etichette insieme al colore per trasmettere significato
- Testa con contenuti reali — il testo segnaposto puo sembrare buono, ma il contenuto reale puo rivelare problemi di contrasto
- Considera la modalita scura separatamente — i colori che passano in modalita chiara possono fallire in modalita scura e viceversa
- Usa uno strumento di verifica del contrasto — gli strumenti automatizzati individuano i problemi piu velocemente dell'ispezione manuale
Domande frequenti
Qual e il rapporto di contrasto minimo per la conformita WCAG?
Per WCAG 2.1 Livello AA, il testo normale richiede un rapporto di contrasto di almeno 4.5:1, e il testo grande (18pt o 14pt grassetto) richiede almeno 3:1. Il livello AAA eleva questi a 7:1 e 4.5:1 rispettivamente. La maggior parte delle leggi sull'accessibilita fa riferimento al livello AA come standard minimo.
Il contrasto dei colori e importante per immagini e icone?
Si. Il criterio di successo WCAG 2.1 1.4.11 richiede che i componenti UI e gli oggetti grafici abbiano almeno 3:1 di contrasto con i colori adiacenti. Questo include icone, bordi dei campi, indicatori di focus ed elementi dei grafici. Le immagini decorative sono esenti.
Come correggo il basso contrasto senza cambiare i colori del mio brand?
Puoi regolare la luminosita dei colori del brand mantenendo la stessa tonalita e saturazione. Ad esempio, scurisci un azzurro per il testo o schiarisci uno sfondo scuro. Un altro approccio e usare i colori del brand per elementi decorativi grandi e neutri ad alto contrasto per il corpo del testo.