Contrasto WCAG

Rapporti minimi

Il contrasto tra testo e sfondo determina quanto contenuto è leggibile per persone con visione ridotta o in condizioni di luce forte. Il livello WCAG 2.x AA richiede rapporto almeno 4,5:1 per testo normale e 3:1 per testo grande (18pt regolare o 14pt bold circa). Componenti UI e grafici informativi hanno soglie simili quando il colore è l’unico veicolo di significato.

Come misurare

Usa strumenti di verifica contrasto (DevTools, estensioni, plugin design). Misura la coppia effettiva renderizzata: testo su gradiente, testo su immagine con overlay, semi-trasparenze. Un hex «quasi nero» su bianco può fallire se l’opacità è 0.6.

Per testo su foto, aggiungi scrim scuro o chiaro dietro al copy fino a raggiungere 4,5:1 sul campione peggiore.

Correggere il contrasto

Scurisci il testo, schiarisci lo sfondo, aumenta peso font o dimensione per qualificare come «testo grande». Evita grigio #999 su #fff per paragrafi: va bene per meta secondarie solo se rispetta comunque 4,5:1.

/* Testo body su sfondo chiaro — rapporto ~12:1 */
.body-text {
  color: #1f2937;
  background-color: #ffffff;
}

.hero-caption {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

Stati interattivi

Controlla hover, focus, disabled, error su form e pulsanti. Un link blu leggibile a riposo può fallire su hover grigio chiaro. Stati disabilitati possono avere eccezioni WCAG ma restano più usabili se distinguibili anche oltre il colore (bordo tratteggiato, testo «non disponibile»).

Contesto d’uso reale

Su display in piena luce o su schermi economici con gamma limitata, contrasto basso trasforma paragrafi leggibili in macchie grigie. Chi ha cataratta o daltonismo parziale dipende ancora di più da coppie testo/sfondo nette. Nei form, errore rosso su sfondo rosa chiaro spesso fallisce AA: aggiungi icona o testo «Errore» oltre al colore. Nei temi scuri, verifica che link e placeholder non scivolino sotto 4,5:1 sul grigio #2a2a2a. Documenta nel design system le coppie approvate così dev e content non improvvisano hex a ogni pagina.

Strumenti automatici scansionano snapshot statici: ricontrolla stati dinamici (menu aperto, tooltip, tab attivo) con screenshot e picker. Per hero fotografici calcola contrasto sul punto più chiaro dello sfondo dietro al titolo bianco.

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Contrasto WCAG con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• Affidarsi al gusto estetico senza misurare.
• Testo su immagini senza overlay.
• Placeholder form grigio chiarissimo.
• Link identificati solo da colore senza sottolineatura dove serve.
• Dark mode con grigi invertiti ma contrasto insufficiente.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

In breve

• AA: 4,5:1 normale, 3:1 testo grande.
• Misura coppie renderizzate reali.
• Hover, focus, errori inclusi.
• Scrim su testo fotografico.