Contrasto, Font Dimensionabile e Disabilità Visive

Molti utenti hanno problemi di vista. Ti mostriamo come rendere i tuoi testi leggibili con il contrasto giusto e font regolabile.

11 min Principiante Aprile 2026

Schermo con modalità ad alto contrasto attiva, mostrando testo bianco su sfondo nero con ingrandimento del font per leggibilità

Scritto da

Marco Rossini

Senior Accessibility Specialist

Perché il contrasto è così importante?

Una persona su quattro ha difficoltà visive. Non è solo questione di cecità totale — molti utenti vedono male i colori sfocati, il testo piccolo, o lo sfondo che si confonde con il testo. Se il contrasto è debole, queste persone semplicemente non riescono a leggere quello che scrivi.

La buona notizia? Migliorare il contrasto è facile e gratuito. Non richiede tecnologie speciali o designer professionisti. Basta seguire le linee guida WCAG — gli standard internazionali per l’accessibilità.

Confronto tra testo con contrasto scarso e contrasto elevato, mostrando la differenza di leggibilità

Palette di colori che mostrano i rapporti di contrasto WCAG AA e AAA con valori numerici visibili

I numeri del contrasto WCAG

Il contrasto si misura con un rapporto numerico. Più alto il numero, migliore il contrasto. Le linee guida WCAG definiscono tre livelli:

4.5:1

WCAG AA (minimo)

Il livello di base. È quello che dovresti sempre raggiungere. Testo su sfondo — niente eccezioni.

7:1

WCAG AAA (ottimale)

Il massimo dello standard. Se lo raggiungi, praticamente tutti possono leggere il tuo sito. Bianco puro su nero puro è 21:1.

Per i testi grandi (18pt o superiori), il rapporto minimo scende a 3:1. Ma non fare affidamento su questo — mantieni sempre il 4.5:1.

Font dimensionabili: il controllo è dell’utente

Alcuni utenti hanno bisogno di testo più grande. Non è pigrizia — è necessità. Se usi pixel fissi (px) nel CSS, l’utente non può ingrandire il testo usando lo zoom del browser. Non è accessibile.

La soluzione è usare unità relative come em o rem invece di pixel. Così quando l’utente aumenta lo zoom al 150% o al 200%, tutto si adatta automaticamente. Il testo non va fuori controllo, i pulsanti rimangono cliccabili, le immagini si ridimensionano.

Come implementarlo:

Usa rem per la maggior parte dei testi — è il metodo più affidabile
Imposta la dimensione base del font nel html (di solito 16px)
Per tutto il resto, calcola rispetto a quella base (1rem = 16px)
Non bloccare lo zoom con user-scalable=no nel viewport meta

Screenshot di un browser che mostra lo zoom al 200% con testo correttamente ridimensionato e layout che rimane intatto

Esempi pratici che funzionano

Ecco cosa non fare e cosa fare invece. Questi sono errori comuni che vediamo tutti i giorni.

Non fare

Testo grigio chiaro (#999) su sfondo bianco — rapporto 2.3:1. Non passa WCAG AA.

Questo testo è difficile da leggere

Fai così

Testo scuro (#333) su sfondo bianco — rapporto 12.6:1. Supera anche WCAG AAA.

Questo testo è facile da leggere

Usa uno strumento online come WebAIM Contrast Checker per testare i tuoi colori. Inserisci il colore del testo e dello sfondo, e ti dice subito il rapporto.

Tool di test del contrasto WebAIM aperto nel browser, mostrando come verificare i rapporti di contrasto tra colori

Strumenti che ti aiutano

Non devi fare tutto manualmente. Questi strumenti verificano il contrasto e suggeriscono miglioramenti automaticamente.

WebAIM Contrast Checker

Tool online gratuito. Inserisci due colori esadecimali e ti dice il rapporto di contrasto esatto e se passa WCAG.

axe DevTools (browser extension)

Installa l’estensione nel tuo browser. Scansiona il sito e ti mostra tutti i problemi di contrasto trovati, direttamente nel codice.

Chrome DevTools (built-in)

Apri gli strumenti per sviluppatori di Chrome, seleziona un elemento, e la sezione Accessibility ti mostra il contrasto calcolato.

WCAG Color Contrast Analyzer

App desktop (gratuita) che ti aiuta a trovare colori accessibili. Puoi anche usarla per testare il sito dal vivo.

La cosa più importante

Rendere il tuo sito accessibile non è complicato. Inizia da questi due punti: contrasto adeguato e font dimensionabili. Se lo fai, avrai già aiutato migliaia di persone a leggere quello che scrivi.

Non è una nicchia — è una percentuale significativa della popolazione. E qui c’è la sorpresa: gli stessi accorgimenti che aiutano le persone con disabilità visive aiutano anche chi usa il sito sotto il sole, o su uno schermo vecchio, o da lontano. Tutti vincono.

Scopri gli altri articoli sulla web accessibility

Disclaimer

Questo articolo è fornito a scopo informativo e educativo. Le linee guida WCAG 2.1 sono standard internazionali riconosciuti, ma l’implementazione specifica dipende dalle tue esigenze e dal tuo contesto. Ogni sito è diverso. Ti consigliamo di testare sempre le tue scelte con utenti reali e di consultare la documentazione ufficiale WCAG per i dettagli tecnici. L’accessibilità è un processo continuo, non una casella da spuntare una sola volta.