Contrasto Colore: Linee Guida WCAG per il Design Accessibile

Il contrasto dei colori è uno dei requisiti di accessibilità più frequentemente violati sul web — e uno dei più facili da correggere. Un contrasto scarso tra il testo e lo sfondo rende il contenuto illeggibile per gli utenti con ipovisione, daltonismo o in condizioni di forte illuminazione. WCAG 2.1 definisce soglie numeriche precise per i rapporti di contrasto accettabili.

Questa guida spiega come vengono calcolati i rapporti di contrasto, cosa significano in pratica i livelli WCAG, dove il contrasto fallisce più comunemente nei design reali e come correggere questi errori sistematicamente — sia nei temi chiari che scuri.

Cos'è il rapporto di contrasto dei colori

Il rapporto di contrasto dei colori è una misura numerica della differenza di luminanza percepita tra due colori — tipicamente il testo e il suo sfondo. Il rapporto è espresso come valore da 1:1 (colori identici, nessun contrasto) a 21:1 (nero puro su bianco puro, contrasto massimo). La formula confronta la luminanza relativa del colore più chiaro (L1) con quello più scuro (L2): contrasto = (L1 + 0.05) / (L2 + 0.05). Un rapporto di 4.5:1 significa che il colore più chiaro è 4.5 volte più luminante di quello più scuro.

Livelli WCAG 2.1 (A/AA/AAA)

Le WCAG (Linee Guida per l'Accessibilità dei Contenuti Web) 2.1 definiscono tre livelli di conformità. Il livello A è il minimo. Il livello AA è lo standard legale e industriale nella maggior parte dei paesi. Il livello AAA è il massimo. Per il contrasto del testo: il testo normale (sotto 18pt o sotto 14pt grassetto) richiede 4.5:1 per AA e 7:1 per AAA. Il testo grande (18pt+ o 14pt+ grassetto) richiede 3:1 per AA e 4.5:1 per AAA. I componenti UI e gli oggetti grafici richiedono 3:1 per AA.

Come calcolare la luminanza

La luminanza relativa è calcolata da valori RGB linearizzati. La formula tiene conto della risposta non lineare dell'occhio umano alla luce. Prima, converti ogni canale a 8 bit (0–255) in un intervallo 0–1, poi applica la correzione gamma per ottenere valori di luce lineare. Infine, combina con i pesi percettivi (rosso=0.2126, verde=0.7152, blu=0.0722). Il canale verde contribuisce maggiormente alla luminosità percepita — ecco perché il verde puro (#00FF00) ha una luminanza molto più alta del blu puro (#0000FF).

/* Calcolo luminanza (JavaScript) */
function getLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928
      ? c / 12.92
      : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

Errori di contrasto comuni

Gli errori di contrasto più frequenti nei design reali: testo grigio chiaro su sfondo bianco (il testo attenuato spesso non supera i 2.5:1), colori brand a saturazione media usati come testo su bianco (i blu e i verdi brand spesso falliscono), link di testo colorati senza sottolineatura su sfondi colorati, stati disabilitati con differenza visiva insufficiente, elementi UI solo icona con contrasto insufficiente. I design in modalità scura spesso introducono nuovi errori: lo stesso colore brand che superava il test su sfondi chiari potrebbe fallire su quelli scuri.

Correggere il contrasto nei temi chiaro/scuro

Quando si costruisce un sistema di design a doppio tema, è essenziale testare il contrasto in entrambe le modalità indipendentemente. La stessa coppia sfondo-testo che supera AA in modalità chiara potrebbe fallire in modalità scura se si inverte semplicemente la tonalità senza ricalcolare il contrasto. L'approccio pratico: definire scale di colori separate per ogni tema. Per il colore brand primario, potrebbe essere necessaria una diversa gradazione di luminosità per la modalità scura rispetto a quella chiara.

Strumenti e automazione

Il controllo manuale in fase di design non è sufficiente — il contrasto può cambiare quando gli utenti applicano temi personalizzati, quando le immagini si caricano dietro il testo, o quando i componenti appaiono in contesti imprevisti. Gli strumenti di audit dell'accessibilità automatizzati (axe, Lighthouse, Pa11y) possono rilevare gli errori di contrasto in fase di build o nelle pipeline CI. Lo strumento Color Contrast di PixCode accetta due qualsiasi colori e restituisce il rapporto, il livello WCAG e suggerimenti per alternative conformi.

Domande Frequenti