WCAG 1.4.3: Contrasto (minimo)

Cosa Significa Questa Regola

WCAG 1.4.3 — Contrast (Minimum) è un criterio di successo di livello AA previsto dalla Linea guida 1.4 (Distinguibile) delle Web Content Accessibility Guidelines 2.2. Stabilisce che la presentazione visiva del testo e delle immagini di testo mantenga un rapporto di contrasto di luminanza sufficiente rispetto allo sfondo, in modo che le persone con una moderata riduzione della vista possano leggere i contenuti senza dover ricorrere a tecnologie assistive che aumentano il contrasto.

I rapporti di contrasto richiesti sono i seguenti. Il testo normale — qualsiasi testo più piccolo di 18 point (circa 24 pixel CSS) o 14 point in grassetto (circa 18,67 pixel CSS) — deve raggiungere un rapporto di contrasto di almeno 4,5:1. Il testo grande, definito come testo di dimensione pari o superiore a 18 point con peso normale o 14 point in grassetto, richiede un rapporto di contrasto minimo di 3:1. Le stesse soglie si applicano alle immagini di testo: le immagini raster o vettoriali che rendono caratteri leggibili devono anch’esse rispettare questi rapporti rispetto a qualsiasi colore di sfondo adiacente.

Il rapporto di contrasto è calcolato utilizzando la formula della luminanza relativa definita nella specifica WCAG. La luminanza relativa (L) è calcolata a partire dai valori di colore sRGB dopo la correzione gamma, e il rapporto è espresso come (L1 + 0,05) / (L2 + 0,05), dove L1 è il valore di luminanza più chiaro e L2 quello più scuro. Un rapporto di 1:1 significa assenza totale di contrasto (colori identici), mentre 21:1 è il massimo, ottenibile solo con nero puro su bianco puro.

Il criterio copre tutto il testo in primo piano reso dal browser, incluso il testo all’interno di pulsanti, link, etichette, campi di modulo, celle di tabella, tooltip, testo segnaposto all’interno degli input e testo sovrapposto a immagini o gradienti. Copre anche gli elementi di testo SVG e il testo reso tramite contenuto generato da CSS (pseudo-elementi ::before e ::after).

WCAG 1.4.3 definisce diverse eccezioni ufficiali che sono esplicitamente escluse dal requisito:

• Testo incidentale: Il testo o le immagini di testo puramente decorative, non visibili o che fanno parte di un componente dell’interfaccia utente inattivo (disabilitato) sono esentati. Ad esempio, l’etichetta attenuata di un campo di modulo disabilitato non deve rispettare il rapporto.
• Logotipi: Il testo che fa parte di un logo o di un nome di marca non ha alcun requisito minimo di contrasto, poiché l’identità del marchio spesso dipende da scelte cromatiche specifiche e ci si aspetta che le persone riconoscano i loghi visivamente.
• Testo grande: Come indicato sopra, il testo grande ha un rapporto più permissivo di 3:1 invece di 4,5:1, riconoscendo che lettere più grandi sono più facili da distinguere anche con un contrasto inferiore.

Si considera un superamento quando il rapporto di contrasto calcolato è uguale o superiore alla soglia applicabile per ogni porzione di testo visibile non esente. Si considera un fallimento quando qualsiasi testo visibile non esente o immagine di testo scende al di sotto della soglia, anche solo di una frazione di punto di rapporto.

Perché È Importante

Circa 2,2 miliardi di persone nel mondo vivono con qualche forma di disabilità visiva, secondo l’Organizzazione Mondiale della Sanità. Una parte significativa di queste persone — incluse quelle con ipovisione dovuta a cataratta, glaucoma, degenerazione maculare e retinopatia diabetica — può ancora leggere il testo sullo schermo quando il contrasto è sufficiente, ma ha difficoltà o non riesce affatto quando il contrasto è scarso. Contrast (Minimum) risponde direttamente alle esigenze di questa popolazione fissando una soglia minima misurabile e verificabile al di sotto della quale il testo diventa inaccessibile.

Oltre ai casi diagnosticati di ipovisione, si stima che circa l’8% degli uomini e lo 0,5% delle donne di discendenza nordeuropea sperimentino qualche forma di deficit della visione dei colori (daltonismo). Sebbene il daltonismo sia distinto dal basso contrasto, molte forme di daltonismo riducono la differenza di luminanza percepita tra alcune tonalità, rendendo un contrasto inadeguato ancora più problematico. Un’etichetta rossa su uno sfondo verde può apparire come un grigio quasi uniforme a una persona con deuteranopia, rendendo il testo invisibile se il contrasto di luminanza sottostante è insufficiente.

Le persone anziane sono colpite in misura sproporzionata. Con l’età, l’occhio perde sensibilità al contrasto e la dimensione della pupilla diminuisce, riducendo la quantità di luce che raggiunge la retina. Una persona sui settant’anni può aver bisogno di un contrasto di luminanza significativamente più elevato per ottenere la stessa leggibilità di una persona sui trent’anni, anche in assenza di una diagnosi clinica di ipovisione.

Si consideri uno scenario concreto reale: un sito di e-commerce turco utilizza testo grigio chiaro (#999999) su sfondo bianco (#FFFFFF) per le descrizioni dei prodotti e le informazioni sui prezzi — una tendenza di design comune, apprezzata per la sua estetica minimalista. Il rapporto di contrasto di questa combinazione è di circa 2,85:1, ben al di sotto della soglia di 4,5:1. Un utente con degenerazione maculare in fase iniziale può essere completamente incapace di leggere il prezzo di un prodotto, ed è costretto ad abbandonare l’acquisto. Questo non solo esclude l’utente da una transazione commerciale fondamentale, ma rappresenta anche una perdita diretta di entrate per il commerciante e un’esposizione legale nelle giurisdizioni che impongono il rispetto dei requisiti di accessibilità.

Dal punto di vista dell’usabilità e della SEO, il testo ad alto contrasto avvantaggia tutti gli utenti in ambienti difficili: luce solare intensa su uno schermo mobile, pannelli di visualizzazione di bassa qualità o semplicemente un utente che non ha calibrato il proprio monitor. Scelte di colore accessibili riducono l’affaticamento visivo per le persone vedenti durante sessioni di lettura prolungate, e i miglioramenti nella leggibilità sono correlati a tassi di rimbalzo più bassi e a un tempo di permanenza sulla pagina più lungo — segnali che i motori di ricerca utilizzano come indicatori di qualità.

Regole Axe-core Correlate

• color-contrast: Questa è la principale regola automatizzata che applica WCAG 1.4.3 a livello AA. Il motore axe-core calcola i colori di primo piano e di sfondo di ogni nodo di testo nel DOM, risolvendo cascade CSS, opacità, stacking tramite z-index e trasparenza alpha. Segnala qualsiasi elemento di testo il cui rapporto di contrasto scende al di sotto di 4,5:1 per il testo normale o 3:1 per il testo grande. La regola riporta il rapporto effettivo rilevato, il rapporto richiesto e lo specifico elemento che non ha superato il controllo, rendendo la correzione semplice. Tuttavia, axe-core può analizzare solo i colori che riesce a determinare dagli stili calcolati; il testo reso all’interno di <canvas>, su gradienti CSS complessi o sopra immagini di sfondo potrebbe non essere completamente risolvibile senza contesto aggiuntivo, e axe contrassegnerà tali casi come “needs review” anziché come superamento o fallimento definitivo. Anche il testo segnaposto negli input dei moduli è controllato da questa regola.
• color-contrast-enhanced: Questa regola applica le soglie più rigorose di WCAG 1.4.6 — Contrast (Enhanced) di 7:1 per il testo normale e 4,5:1 per il testo grande (livello AAA). Sebbene 1.4.6 non sia richiesto per la conformità AA, eseguire questa regola durante lo sviluppo è utile per i team che puntano a un’accessibilità avanzata o che si preparano a contesti normativi che potrebbero adottare requisiti AAA. Axe-core segnala le violazioni di questa regola separatamente, in modo che i team possano distinguere tra i fallimenti AA (color-contrast) e i miglioramenti AAA aspirazionali (color-contrast-enhanced).

È necessario il test manuale in diversi scenari che gli strumenti automatizzati non possono risolvere completamente. Quando il testo è sovrapposto a un’immagine di sfondo o a un gradiente CSS, il colore di sfondo effettivo varia all’interno del riquadro di delimitazione del testo. Gli strumenti automatizzati devono campionare il colore dominante, assumere la regione peggiore o rinviare a un revisore manuale. Allo stesso modo, il testo all’interno di elementi <canvas> è reso come pixel senza informazioni semantiche sul colore disponibili per l’albero di accessibilità, quindi l’ispezione manuale con uno strumento contagocce è l’unico approccio affidabile. Il testo che appare solo negli stati :hover o :focus può richiedere anche un’interazione manuale per essere attivato prima che gli strumenti automatizzati possano valutarlo.

Come Testare

1. Scansione automatizzata con axe DevTools: Installa l’estensione del browser axe DevTools (disponibile per Chrome, Firefox ed Edge). Vai alla pagina da testare, apri il pannello dell’estensione ed esegui un’analisi dell’intera pagina. Nel pannello dei risultati, filtra per gli ID delle regole color-contrast e color-contrast-enhanced. Per ogni violazione, lo strumento evidenzia l’elemento non conforme, riporta il rapporto di contrasto effettivo (ad esempio, “2,85:1”), il rapporto richiesto (ad esempio, “4,5:1”) e i colori di primo piano e di sfondo calcolati in esadecimale. Esporta i risultati in CSV o JSON per il tracciamento. Ripeti su tutti i breakpoint, poiché i layout responsive possono modificare le dimensioni dei font (influenzando la soglia per il testo grande) o cambiare le combinazioni di colori.
2. Audit con Lighthouse: Apri Chrome DevTools, vai alla scheda Lighthouse, seleziona “Accessibility” ed esegui l’audit. Lighthouse mostra le violazioni di color-contrast nella sezione Accessibility con i riferimenti agli elementi. Nota che Lighthouse utilizza in alcuni ambienti una versione più vecchia di axe-core; l’uso diretto di axe DevTools può rilevare più problemi.
3. Misurazione manuale del contrasto: Usa il selettore di colore integrato negli strumenti di sviluppo del browser o uno strumento dedicato come il WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) o l’applicazione desktop TPGi Colour Contrast Analyser. Seleziona i colori di primo piano e di sfondo con il contagocce e verifica che il rapporto riportato soddisfi la soglia. Per il testo su gradienti o immagini, campiona più punti nell’area del testo e utilizza la misurazione con il contrasto più basso come valore definitivo.
4. Test degli stati interattivi: Attiva manualmente gli stati :hover, :focus, :active e :visited su link ed elementi interattivi, quindi misura il contrasto per ciascuno stato separatamente. Alcuni design utilizzano colori hover con contrasto più basso che falliscono involontariamente. Usa la funzione “Force element state” degli strumenti di sviluppo del browser per mantenere uno stato mentre effettui la misurazione.
5. Revisione con screen reader e tastiera (contestuale): Sebbene il contrasto sia un criterio visivo e non sia rilevabile direttamente dagli screen reader, testare con NVDA + Firefox, VoiceOver + Safari o JAWS + Chrome consente di verificare che il testo sia presente nell’albero di accessibilità e non sia nascosto tramite tecniche CSS (come color: transparent) che lo renderebbero visivamente inaccessibile. Se uno screen reader annuncia testo che appare invisibile sullo schermo, verifica se il rendering visivo soddisfa i requisiti di contrasto per le persone vedenti.
6. Zoom e ridimensionamento dei font: Aumenta la dimensione predefinita del font del browser (Impostazioni → Aspetto → Dimensione del carattere) e lo zoom al 200%. Verifica che il testo che passa da “normale” a “grande” a queste dimensioni soddisfi ancora la soglia appropriata. Un font di 14px allo zoom predefinito può diventare 28px al 200% di zoom, cambiando la soglia applicabile.

Come Correggere

Testo del corpo con contrasto insufficiente — Errato

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Testo del corpo con contrasto insufficiente — Corretto

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Pulsante call-to-action con basso contrasto — Errato

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Pulsante call-to-action con basso contrasto — Corretto

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Testo segnaposto in un campo di input — Errato

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Testo segnaposto in un campo di input — Corretto

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Testo su un’immagine di sfondo o un gradiente — Errato

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Testo su un’immagine di sfondo o un gradiente — Corretto

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Errori Comuni

• Dare per scontato che un colore vada bene sul proprio monitor calibrato: I display di fascia alta con ampi gamut di colore e alta luminosità possono far apparire leggibili combinazioni a basso contrasto a designer con vista normale in un ambiente controllato, mentre lo stesso testo è illeggibile su uno schermo di laptop economico o sotto l’illuminazione al neon di un ufficio. Verifica sempre con uno strumento per il rapporto di contrasto, non solo con il giudizio visivo.
• Dimenticare di testare separatamente gli stati interattivi: Un link può superare la soglia di 4,5:1 nel suo stato predefinito ma scendere a 2,8:1 in :hover quando il colore si schiarisce. Ogni stato interattivo deve soddisfare indipendentemente la soglia.
• Considerare i campi di modulo disabilitati come universalmente esenti: L’esenzione si applica solo ai componenti dell’interfaccia utente inattivi. Se un campo è stilizzato visivamente come disabilitato ma è ancora abilitato a livello di codice (manca l’attributo disabled), non è esente e deve rispettare i requisiti di contrasto.
• Usare l’opacità per attenuare il testo senza considerare il colore effettivo: Impostare opacity: 0.5 su un testo scuro lo fonde di fatto con lo sfondo, producendo un colore composito più chiaro. Il rapporto di contrasto deve essere calcolato rispetto al colore composito risultante, non al valore CSS originale. Ad esempio, #000000 al 50% di opacità su bianco viene reso approssimativamente come #808080, che ha un rapporto di contrasto di circa 3,9:1 — al di sotto della soglia di 4,5:1 per il testo normale.
• Trascurare il testo all’interno di elementi SVG: Gli elementi SVG <text> stilizzati con fill anziché con la proprietà CSS color sono comunque soggetti al criterio 1.4.3. Gli strumenti automatizzati possono non rilevarli a seconda di come l’SVG è incorporato (inline vs. <img> vs. <object>). L’SVG inline è l’approccio più affidabile per i test.
• Identificare in modo errato la dimensione del testo per l’esenzione del testo grande: Le soglie 18pt / 14pt in grassetto si riferiscono alla dimensione resa nel browser dell’utente, non al valore in pixel CSS nel sorgente. CSS font-size: 24px equivale esattamente a 18pt (poiché 1pt = 1,333px), ma se l’utente ha impostato una dimensione predefinita del font più grande, un elemento di 16px può essere reso più grande di 18pt. Esegui i test con le dimensioni predefinite del font del browser e controlla con attenzione i calcoli delle dimensioni.
• Affidarsi esclusivamente al colore per distinguere il testo dei link dal testo del corpo: Se un link è stilizzato senza sottolineatura e utilizza solo il colore per differenziarsi dal testo circostante, il colore del link deve raggiungere un rapporto di 3:1 rispetto al colore del testo del corpo in aggiunta al rapporto di 4,5:1 rispetto allo sfondo della pagina. Molti design non rispettano uno o entrambi questi requisiti. Aggiungere sottolineature (o un altro indicatore visivo non basato sul colore) è l’approccio più sicuro.
• Ignorare il testo all’interno di widget di terze parti e plugin di chat: I widget incorporati — finestre di chat dal vivo, banner per il consenso ai cookie, caroselli di recensioni, feed dei social media — fanno parte della pagina e rientrano nell’ambito della conformità a WCAG 1.4.3. Il testo a basso contrasto all’interno di un widget di terze parti costituisce un fallimento anche se la tua base di codice è completamente conforme.
• Non ripetere i test dopo l’attivazione della modalità scura o della modalità ad alto contrasto: Uno schema di colori che supera i test in modalità chiara può fallire in modalità scura se le custom properties CSS non sono gestite con attenzione. Allo stesso modo, la Windows High Contrast Mode sovrascrive molte dichiarazioni di colore CSS; verifica che il testo rimanga leggibile e che nessun CSS personalizzato reintroduca involontariamente coppie a basso contrasto in ambienti con colori forzati.
• Usare tecniche come CSS background-clip: text o testo con gradiente senza un fallback: Il testo riempito con un gradiente creato tramite -webkit-background-clip: text; color: transparent presenta una sfida di contrasto complessa perché il colore del testo varia all’interno del glifo. Gli strumenti automatizzati in genere non riescono a risolvere questo caso, e la luminanza effettiva di ogni parte della lettera deve essere verificata manualmente rispetto allo sfondo della pagina.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale n. 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale (Resmî Gazete) n. 32933 il 21 giugno 2025, stabilisce un quadro nazionale vincolante per l’accessibilità digitale. La Circolare impone la conformità a standard di accessibilità web riconosciuti a livello internazionale — allineando di fatto i requisiti normativi turchi a WCAG 2.2 — e introduce l’Erişilebilirlik Logosu (Logo di Accessibilità), rilasciato dal Ministero della Famiglia e dei Servizi Sociali (Aile ve Sosyal Hizmetler Bakanlığı), come marchio ufficiale di certificazione per prodotti e servizi digitali conformi.

WCAG 1.4.3 — Contrast (Minimum) è un criterio di successo di livello AA, e la conformità di livello AA è la base necessaria per qualificarsi per l’Accessibility Logo. Ciò significa che qualsiasi soggetto che persegua il logo deve garantire che tutto il testo visibile non esente e tutte le immagini di testo sui propri siti web e applicazioni rispettino le soglie di contrasto 4,5:1 (testo normale) e 3:1 (testo grande) definite da questo criterio. Il mancato rispetto del criterio 1.4.3 è una delle violazioni automatizzate rilevate più frequentemente e costituirebbe un ostacolo diretto alla certificazione.

La Circolare si applica a un’ampia gamma di soggetti del settore pubblico e privato. Tra i soggetti interessati figurano le istituzioni e agenzie pubbliche a livello di governo centrale e locale; le banche e istituzioni finanziarie regolamentate dall’Autorità di Regolamentazione e Vigilanza Bancaria (BDDK); gli ospedali e i fornitori di servizi sanitari, sia pubblici che privati; gli operatori di telecomunicazioni con 200.000 o più abbonati; le piattaforme di e-commerce che soddisfano le soglie applicabili di fatturato o volume di transazioni; le agenzie di viaggio; le società di trasporto private; e le scuole private e istituzioni educative autorizzate dal Ministero dell’Istruzione Nazionale (MEB).

Per questi soggetti, affrontare la conformità in materia di contrasto non è semplicemente una raccomandazione di best practice — ha un peso normativo. Le organizzazioni non conformi rischiano un controllo amministrativo e conseguenze reputazionali, mentre le organizzazioni conformi possono esporre l’Erişilebilirlik Logosu come segnale di fiducia per circa 8,5 milioni di persone con disabilità in Turchia, oltre che per le persone anziane, gli utenti mobile e il pubblico generale che traggono beneficio da un design leggibile e ad alto contrasto.

Le organizzazioni che operano in Turchia e che non hanno ancora condotto un audit rispetto a WCAG 1.4.3 dovrebbero dare priorità alla scansione automatizzata di tutti i punti di contatto digitali rivolti al pubblico — web, web mobile e applicazioni native ove applicabile — seguita da una revisione manuale dei gradienti di sfondo, delle sovrapposizioni di immagini e dei componenti incorporati di terze parti. L’adozione di un sistema di design token con coppie di colori pre-approvate e verificate per il contrasto è la soluzione più scalabile a lungo termine, garantendo che i nuovi componenti dell’interfaccia utente ereditino per impostazione predefinita combinazioni di colori accessibili e che i futuri redesign non introducano involontariamente problemi di contrasto.