Comprendi le soglie di contrasto WCAG, misura una combinazione di colori e correggi i casi che ostacolano la lettura o l’uso dell’interfaccia.
Un testo grigio chiaro su fondo bianco può sembrare elegante in una mockup e diventare difficile da leggere su un telefono al sole. Un pulsante che comunica lo stato solo cambiando colore può essere ambiguo per chi distingue male alcune tonalità.
Il contrasto non è quindi soltanto una preferenza estetica: è una componente dell’accessibilità visiva.
Per il testo, le soglie più note delle WCAG sono:
| Situazione | AA | AAA |
|---|---|---|
| Testo normale | 4,5:1 | 7:1 |
| Testo grande | 3:1 | 4,5:1 |
Per alcuni elementi grafici e componenti necessari all’uso dell’interfaccia, il criterio sul contrasto non testuale utilizza generalmente 3:1 rispetto ai colori adiacenti rilevanti.
Questi numeri non descrivono però tutta l’accessibilità. Un’interfaccia può superare il test del testo e restare problematica se gli errori dipendono solo dal rosso, i bordi dei campi sono invisibili o gli stati focus non si distinguono.
Confronta la luminanza relativa di due colori. Va da 1:1, quando la luminanza è uguale, fino a 21:1 per nero e bianco.
Non misura direttamente differenza di tonalità, saturazione, distanza HSL o qualità estetica. Due colori molto diversi come hue possono avere luminanze relativamente vicine.
Il verificatore di contrasto permette di calcolare rapidamente il rapporto.
Due colori con L=50% in HSL non hanno necessariamente la stessa luminanza percepita. Giallo e blu possono condividere una lightness HSL numericamente identica e produrre livelli di contrasto molto diversi.
La L di HSL non è la luminanza relativa usata dalle WCAG. Non dedurre quindi il contrasto dalla sola lightness.
La formula è:
(L1 + 0,05) / (L2 + 0,05)con L1 luminanza del colore più chiaro e L2 quella del più scuro. Le componenti sRGB devono essere linearizzate prima della ponderazione.
Nella pratica è meglio usare un calcolatore; conoscere la formula serve soprattutto a capire che si tratta di una misura precisa, non di un’impressione soggettiva.
Per il testo corrente, il livello AA richiede almeno 4,5:1 salvo le eccezioni previste dal criterio. Se il rapporto è inferiore, occorre modificare testo, sfondo o entrambi.
Non cercare però soltanto di superare la soglia di pochi centesimi: un margine ragionevole rende il design più robusto rispetto a variazioni di rendering e stati dell’interfaccia.
La soglia scende a 3:1 per testo considerato grande secondo le definizioni WCAG. Non bisogna usare questa eccezione come scorciatoia per rendere testi importanti appena più grandi e mantenere colori deboli.
La leggibilità dipende anche da font, peso, dimensione, schermo e condizioni di visione.
Bordi di input, icone necessarie, indicatori di stato e parti grafiche essenziali possono rientrare nei requisiti di contrasto non testuale. Un controllo che scompare visivamente può rendere impossibile capire dove cliccare o quale elemento è attivo.
Un messaggio di errore non dovrebbe essere comunicato esclusivamente passando dal verde al rosso. Aggiungi testo, icona, etichetta o altra indicazione percepibile.
Lo stesso vale per grafici, link e stati selezionati. La ridondanza informativa rende l’interfaccia più robusta.
Un colore con alpha cambia risultato in base allo sfondo su cui viene composto. Il contrasto va quindi misurato sulla colore finale effettivo, non sulla componente RGB non composita.
Per testo su fotografie o gradienti, una singola coppia di colori non basta. Bisogna verificare le zone reali dietro il testo, oppure creare uno sfondo o overlay che garantisca contrasto sufficiente.
Controlla default, hover, focus, active, disabled, selected ed error. Un pulsante accessibile nello stato normale può diventare illeggibile al passaggio del mouse o perdere il contorno di focus.
Puoi scurire il testo, schiarire lo sfondo, cambiare entrambi o utilizzare una variante della palette progettata per quel ruolo.
Non modificare però colori di brand senza considerare tutto il sistema. Spesso la soluzione migliore è mantenere il colore di marca per superfici decorative e usare una tonalità più scura o chiara per il testo.
Il rapporto WCAG è un controllo fondamentale ma non sufficiente. Misura la coppia reale di colori, verifica ogni stato dell’interfaccia, non affidarti soltanto al colore per comunicare significato e testa il risultato nel contesto effettivo della pagina.
Raccolta
5 / 14
Estrai i colori dominanti di un’immagine, assegna loro un ruolo e crea una palette coerente senza confondere frequenza e importanza visiva.
Comprendi come RGB, HEX e HSL descrivono i colori sRGB per scegliere una notazione CSS leggibile e convertire i valori senza confusione.
Calcola una media ponderata, distingui il peso delle prove da quello delle materie e scopri il voto necessario alla prossima verifica.