🎨
← Torna alle guide

Contrasto del Colore Accessibile: Linee Guida WCAG Spiegate per Designer

· Tag: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Contrasto del Colore Accessibile: Linee Guida WCAG Spiegate

Il contrasto del colore è uno degli aspetti più importanti dell'accessibilità web. Influisce direttamente sulla capacità degli utenti di leggere i tuoi contenuti, navigare nella tua interfaccia e completare le loro attività. Eppure i problemi di contrasto rimangono tra i problemi di accessibilità più comuni sul web — spesso perché i designer scelgono colori che appaiono belli sui loro schermi senza verificare i rapporti.

Questa guida spiega tutto ciò che devi sapere sui requisiti di contrasto del colore WCAG, come soddisfarli e come progettare interfacce accessibili senza sacrificare la qualità visiva.

Cos'è il Rapporto di Contrasto del Colore?

Il contrasto del colore è una misura della differenza nella luminanza percepita tra due colori — tipicamente primo piano (testo) e sfondo. Il contrasto è espresso come un rapporto che va da 1:1 (colori identici, testo invisibile) a 21:1 (testo nero su sfondo bianco, il massimo possibile).

Il rapporto di contrasto è calcolato usando la luminanza relativa, che tiene conto di come l'occhio umano percepisce diverse lunghezze d'onda della luce. La formula è:

Rapporto di contrasto = (L1 + 0.05) / (L2 + 0.05)

Dove L1 è la luminanza relativa del colore più chiaro e L2 è la luminanza relativa del colore più scuro. L'occhio umano è più sensibile alla luce verde che al rosso o al blu, quindi il calcolo della luminanza pesa i canali in modo diverso.

Non devi calcolarlo manualmente. Ogni strumento di verifica del contrasto, incluso il nostro convertitore di colori, lo fa istantaneamente.

Requisiti di Contrasto WCAG

Le Web Content Accessibility Guidelines (WCAG) definiscono tre livelli di conformità: A, AA e AAA. I requisiti di contrasto del colore si applicano ai livelli AA e AAA.

Livello WCAG AA (Minimo Raccomandato)

AA è lo standard minimo per la maggior parte dei siti web ed è richiesto per legge in molte giurisdizioni (incluso l'European Accessibility Act e le normative sull'accessibilità negli Stati Uniti, Canada e Australia).

| Categoria di Testo | Rapporto Minimo | Esempio di Grigio Conforme su Bianco | |---------------|--------------|-------------------------------------| | Testo normale (sotto 18px / 14px in grassetto) | 4.5:1 | #767676 su bianco | | Testo grande (18px+ in grassetto o 24px+ normale) | 3:1 | #9A9A9A su bianco | | Componenti UI (bordi, icone, campi di modulo) | 3:1 | Bordi dei componenti, indicatori di focus | | Grafiche non decorative | 3:1 | Grafici, infografiche, icone |

Livello WCAG AAA (Avanzato)

AAA è uno standard superiore che fornisce una migliore leggibilità, soprattutto per gli utenti con ipovisione o problemi di sensibilità al contrasto.

| Categoria di Testo | Rapporto Minimo | Esempio di Grigio Conforme su Bianco | |---------------|--------------|-------------------------------------| | Testo normale | 7:1 | #595959 su bianco | | Testo grande | 4.5:1 | #777777 su bianco |

AAA non è richiesto per la conformità alla maggior parte delle normative, ma è raccomandato per i siti che servono anziani o utenti con disabilità visive.

Cosa Coprono Questi Requisiti

I requisiti di contrasto WCAG si applicano a:

  • Testo — Tutto il testo del corpo, intestazioni, etichette, didascalie e testo dei link
  • Testo nelle immagini — Testo che fa parte di un'immagine (testo decorativo escluso)
  • Componenti UI — Pulsanti, campi di modulo, slider, interruttori e i loro bordi
  • Icone — Icone essenziali che trasmettono informazioni (non decorative)
  • Indicatori di focus — I contorni di focus da tastiera devono avere contrasto 3:1 rispetto allo sfondo adiacente

Cosa NON Coprono Questi Requisiti

  • Logo — Testo che fa parte di un logo di marca o del nome di un'azienda
  • Elementi decorativi — Immagini puramente decorative senza scopo funzionale
  • UI inattiva — Pulsanti o controlli di modulo disabilitati (anche se devono comunque essere percepibili)
  • Testo sensoriale — Testo che fa parte di un'immagine di sfondo dove il testo non è essenziale

Problemi di Contrasto Comuni e Come Risolverli

1. Testo Grigio Chiaro

Il testo grigio chiaro su sfondi bianchi è di gran lunga il problema di contrasto più comune. Una tonalità come #CCCCCC su bianco ha un rapporto di contrasto di solo 1.6:1 — molto al di sotto del minimo di 4.5:1.

Correzione: Scurisci il tuo testo grigio. Per il testo del corpo su bianco, punta ad almeno #595959 (conforme AAA). Anche #767676 (minimo AA per testo di 14px) è notevolmente più scuro della maggior parte delle scelte di grigio "sottili".

2. Colori del Brand Usati per il Testo del Corpo

I colori del brand sono spesso troppo chiari quando vengono applicati come testo. Un blu medio come #3366CC su bianco ha un rapporto di circa 3.5:1 — al di sotto dello standard 4.5:1.

Correzione: Riserva i colori del brand per intestazioni e accenti. Usa un nero quasi puro (#1A1A1A a #333333) per il testo del corpo. Verifica che qualsiasi testo colorato soddisfi il rapporto.

3. Indicatori di Link Basati Solo sul Colore

I link che differiscono dal testo del corpo solo per il colore non soddisfano il Criterio di Successo WCAG 1.4.1 (Uso del Colore). Gli utenti daltonici potrebbero non percepire la differenza.

Correzione: Fornisci sempre un indicatore non cromatico per i link. Approcci comuni:

  • Sottolineare i link (la soluzione più robusta)
  • Aggiungere un'icona (freccia o simbolo di link esterno)
  • Usare un peso del carattere in grassetto per i link inline
  • Fornire un'evidenziazione di sfondo

4. Testo su Immagini di Sfondo

Il testo posizionato su foto o gradienti raramente ha un contrasto sufficiente sull'intera immagine.

Correzione:

  • Aggiungi un overlay semi-trasparente tra l'immagine e il testo
  • Usa text-shadow per un effetto di contorno sottile
  • Posiziona il testo in un riquadro sovrapposto con colore pieno
  • Assicurati che qualsiasi porzione dell'immagine che potrebbe apparire dietro il testo soddisfi il rapporto minimo

5. Testo Segnaposto a Basso Contrasto

I segnaposto dei moduli come #BDBDBD su bianco (1.9:1) sono comuni ma non soddisfano i requisiti di contrasto.

Correzione: Scurisci i segnaposto ad almeno #757575 (4.6:1). Ancora meglio, usa le etichette invece dei segnaposto — le etichette sono sempre visibili e non spariscono mai quando gli utenti iniziano a digitare.

Testare il Contrasto del Colore

Strumenti Automatici

  • DevTools del browser — I DevTools di Chrome e Firefox hanno una verifica del contrasto integrata. Ispeziona un elemento e cerca il rapporto di contrasto nel pannello "Styles" o "Accessibility".
  • Verificatori di contrasto online — Inserisci due colori e ottieni lo stato istantaneo di superamento/non superamento per AA e AAA.
  • Plugin per strumenti di design — Stark, A11y e Contrast sono disponibili per Figma, Sketch e Adobe XD. Questi verificano il contrasto direttamente nei tuoi file di design.
  • Lighthouse — L'audit Lighthouse di Google segnala automaticamente i problemi di contrasto.

Test Manuali

Gli strumenti automatici possono verificare solo il contrasto del testo. Per una revisione completa dell'accessibilità:

  1. Spegni il monitor — Riesci a distinguere tutti gli elementi dell'interfaccia?
  2. Usa un filtro in scala di grigi — Le informazioni vengono ancora trasmesse correttamente senza colore?
  3. Testa con un simulatore di daltonismo — Strumenti come Colorblindly (estensione Chrome) mostrano come appare il tuo sito agli utenti con vari tipi di deficit della visione dei colori.
  4. Testa alla luce diretta del sole — L'elevata luce ambientale riduce il contrasto percepito.

Progettare per il Daltonismo

Circa 1 uomo su 12 (8%) e 1 donna su 200 (0,5%) hanno qualche forma di deficit della visione dei colori. I tipi più comuni sono:

  • Deuteranopia (cecità al verde, 6% dei maschi) — Difficoltà a distinguere il rosso dal verde
  • Protanopia (cecità al rosso, 2% dei maschi) — Il rosso appare più scuro, confusione con il verde
  • Tritanopia (cecità al blu, rara) — Difficoltà a distinguere il blu dal giallo

Strategie di Design

  1. Non affidarti mai solo al colore — Qualsiasi informazione trasmessa tramite il colore (stati di errore, indicatori di stato, categorie di grafici) deve essere trasmessa anche tramite testo, icone, motivi o posizione.

  2. Evita le combinazioni problematiche — Rosso/verde, blu/viola, verde/marrone e verde/blu sono le coppie più comunemente confuse.

  3. Usa motivi e texture — Nei grafici e nei diagrammi, usa linee tratteggiate, riempimenti a tratteggio e forme diverse in aggiunta al colore.

  4. Aggiungi etichette direttamente — Nelle visualizzazioni di dati, etichetta i punti dati direttamente piuttosto che affidarti a una legenda codificata per colore.

  5. Testa con i simulatori — Ogni design dovrebbe essere testato tramite simulatori di deuteranopia e protanopia prima della pubblicazione.

Costruire un Sistema di Colori Accessibile

Passo 1: Scegli Colori Base Accessibili

Inizia con colori che forniscono naturalmente un buon contrasto. Blu profondi, verdi scuri e rossi intensi possono essere tutti colori base accessibili se abbinati in modo appropriato.

Passo 2: Genera una Scala Conforme

Crea una scala di luminosità in cui ogni gradino mantenga un contrasto sufficiente con i vicini più chiari e più scuri. OKLCH è ideale per questo perché il suo canale di luminosità è percettivamente uniforme:

--text-primary: oklch(10% 0.01 0);    /* Quasi nero, ~19:1 su bianco */
--text-secondary: oklch(35% 0.02 0);  /* Grigio scuro, ~9:1 su bianco */
--text-muted: oklch(45% 0.02 0);      /* Grigio medio, ~5.5:1 su bianco */
--text-disabled: oklch(60% 0.02 0);   /* Grigio chiaro, ~3:1 su bianco */

Passo 3: Verifica Ogni Combinazione

Ogni coppia primo piano-sfondo nel tuo sistema di design deve essere verificata:

  • Testo primario su superficie — minimo 4.5:1 (7:1 raccomandato)
  • Testo secondario su superficie — minimo 4.5:1
  • Testo attenuato su superficie — minimo 3:1 (solo per testo non essenziale)
  • Elementi interattivi — minimo 3:1 per gli stati
  • Indicatori di focus — minimo 3:1

Checklist Pratica per Sviluppatori

  • [ ] Tutto il testo del corpo soddisfa o supera il rapporto di contrasto 4.5:1
  • [ ] Tutto il testo grande soddisfa o supera il rapporto di contrasto 3:1
  • [ ] I link hanno un indicatore non cromatico (sottolineatura, icona o cambio di peso)
  • [ ] Gli input dei moduli hanno bordi o sfondi visibili (non solo testo segnaposto)
  • [ ] Gli indicatori di focus hanno contrasto 3:1 rispetto agli sfondi adiacenti
  • [ ] Gli stati di errore combinano il colore con testo o icone
  • [ ] Grafici e diagrammi usano motivi o etichette dirette in aggiunta al colore
  • [ ] Il testo segnaposto soddisfa il minimo 4.5:1
  • [ ] Gli elementi disabilitati sono visivamente distinguibili ma ancora percepibili
  • [ ] Il design è stato testato con simulatori di daltonismo

Conclusione

Il contrasto del colore accessibile non è facoltativo — è un requisito fondamentale del design web inclusivo. Soddisfare gli standard WCAG AA rende i tuoi contenuti accessibili agli utenti con disabilità visive, migliora la leggibilità per tutti e spesso si traduce in design più puliti e intenzionali. Inizia con la verifica del contrasto nel tuo flusso di lavoro, usa il colore come complemento — non come sostituto — degli altri indicatori visivi, e testa sempre i tuoi design attraverso la lente dell'accessibilità.

Usa il nostro convertitore di colori online gratuito con verifica del contrasto integrata per controllare le tue combinazioni di colori rispetto agli standard WCAG AA e AAA.