WCAG 1.4.11: Contrasto non testuale

Cosa Significa Questa Regola

WCAG 1.4.11 Contrasto non testuale è un criterio di livello AA introdotto in WCAG 2.1 e mantenuto in WCAG 2.2. Impone un rapporto di contrasto minimo di 3:1 tra la presentazione visiva delle seguenti due categorie di contenuto e i loro colori adiacenti:

• Componenti dell’interfaccia utente (UI): I confini o indicatori visivi che identificano i controlli interattivi come campi di testo, checkbox, pulsanti di opzione (radio), interruttori toggle, menu a discesa e pulsanti. Questo include sia il componente in sé sia qualsiasi cambiamento di stato visivo (ad es. hover, focus, selezionato, errore).
• Oggetti grafici: Parti di icone, grafici, diagrammi e altre immagini significative necessarie per comprendere il contenuto. Ogni parte del grafico che trasmette informazioni deve rispettare la soglia 3:1 rispetto al colore circostante.

Il rapporto di contrasto è misurato tra l’elemento in primo piano e il colore immediatamente adiacente — tipicamente il suo colore di sfondo, il colore del bordo o un segmento adiacente di un grafico. Il calcolo utilizza la stessa formula di luminanza relativa definita in WCAG 1.4.3, ma la soglia è 3:1 invece di 4.5:1 perché gli elementi non testuali possono permettersi un contrasto leggermente inferiore pur rimanendo distinguibili.

Un superamento significa che ogni indicatore visivo che identifica un componente UI o comunica informazioni in un elemento grafico raggiunge almeno un rapporto di 3:1. Un fallimento si verifica quando un bordo, il tratto di un’icona, un segmento di un grafico o un indicatore di stato scende sotto questo rapporto e il componente o il grafico non può essere identificato o compreso senza quell’informazione visiva.

La specifica WCAG definisce diverse importanti eccezioni:

• Componenti inattivi: I componenti UI che sono disabilitati e non disponibili all’interazione sono esentati. Un pulsante disattivato in grigio che non può essere cliccato non deve rispettare il requisito di contrasto.
• Aspetto controllato dall’agente utente: I componenti la cui presentazione visiva è interamente controllata dallo stile predefinito del browser (non sovrascritto dal CSS dell’autore) sono esentati, perché la responsabilità ricade sul fornitore del browser.
• Grafica essenziale o decorativa: Oggetti grafici in cui la particolare presentazione è essenziale per l’informazione trasmessa (ad es. bandiere nazionali che rappresentano paesi) o che sono puramente decorativi sono esentati. Anche i loghi sono generalmente esentati in base a questa clausola.
• Testo: Il testo e le immagini di testo sono già coperti da 1.4.3 e 1.4.6 e non rientrano in 1.4.11.

Gli indicatori di focus meritano un’attenzione particolare in WCAG 2.2. Il criterio 2.4.11 (Aspetto del focus) aggiunge requisiti più severi per la visibilità del focus, ma 1.4.11 si applica comunque al contrasto di qualsiasi anello di focus personalizzato rispetto al suo sfondo. Un outline o un box-shadow personalizzato usato come indicatore di focus deve raggiungere 3:1 rispetto al colore adiacente per soddisfare questo criterio in modo indipendente.

Perché È Importante

Circa 2,2 miliardi di persone nel mondo hanno qualche forma di disabilità visiva, secondo l’Organizzazione Mondiale della Sanità. Una parte significativa di queste persone — inclusi i circa 253 milioni di individui che vivono con una perdita della vista da moderata a grave — si affida a un contrasto sufficiente per percepire e interagire con le interfacce digitali senza necessariamente usare un lettore di schermo. Le persone con ipovisione che navigano con software di ingrandimento, modalità ad alto contrasto o semplicemente in condizioni di illuminazione difficili sono tra quelle più direttamente colpite dai fallimenti di 1.4.11.

Consideriamo uno scenario pratico: una persona con glaucoma sta compilando un modulo di richiesta di rimborso assicurativo sul sito web di un ospedale. I campi del modulo usano un bordo grigio chiaro (#cccccc) su uno sfondo bianco (#ffffff), che produce un rapporto di contrasto di soli 1.6:1 — ben al di sotto del richiesto 3:1. La persona non riesce a vedere dove iniziano e finiscono i campi di input, quindi non può cliccarci in modo affidabile né comprendere la struttura del modulo. Abbandona completamente il modulo, con un costo sia personale sia in termini di responsabilità legale per l’istituzione.

Oltre alla disabilità visiva, anche le disabilità cognitive possono rendere più difficile l’interpretazione di componenti UI a basso contrasto. Le persone con disturbi dell’attenzione o difficoltà di elaborazione si affidano a una forte differenziazione visiva tra elementi interattivi e non interattivi per comprendere rapidamente la struttura della pagina. Allo stesso modo, le persone con tremori o disabilità motorie che usano target del puntatore di grandi dimensioni devono vedere chiaramente i confini dei controlli per mirare con precisione.

Dal punto di vista del business, rispettare 1.4.11 migliora l’usabilità per tutte le persone in condizioni subottimali — luce solare intensa su uno schermo mobile, monitor di bassa qualità o display più vecchi con scarsa accuratezza cromatica. Riduce i costi di supporto, amplia la portata del pubblico e rafforza indirettamente la SEO riducendo i tassi di abbandono legati a una scarsa usabilità. Per le organizzazioni soggette a obblighi legali in materia di accessibilità, non rispettare questo criterio a livello AA comporta un rischio diretto di non conformità.

Regole Axe-core Correlate

• color-contrast (copertura parziale): La regola color-contrast di axe-core prende di mira principalmente il contrasto del testo ai sensi di WCAG 1.4.3, ma esegue anche controlli parziali per gli elementi non testuali in determinati contesti. Axe segnala componenti UI come pulsanti e controlli di form quando può determinare in modo programmatico che il confine visivo o lo sfondo del componente non rispetta il rapporto 3:1. Tuttavia, la copertura della regola è esplicitamente indicata come parziale per 1.4.11 perché molti fallimenti di contrasto per elementi non testuali sono invisibili all’analisi automatizzata. Ad esempio, il contrasto del tratto di un’icona SVG rispetto al suo sfondo, o il bordo di una checkbox personalizzata implementata con pseudo-elementi CSS, non può essere estratto in modo affidabile dal DOM senza il contesto di rendering. Lo stile calcolato di un bordo CSS può essere presente nell’albero di accessibilità ma lo sfondo adiacente — soprattutto quando è un gradiente, un’immagine o un elemento sovrapposto — non è sempre computabile in modo programmatico. Per questo motivo axe riporta le violazioni di 1.4.11 sotto la regola color-contrast con la designazione needs review in molti casi, il che significa che lo strumento ha rilevato un potenziale problema ma una persona deve confermarlo ispezionando visivamente l’elemento e usando uno strumento di analisi del contrasto dei colori per campionare i pixel effettivamente renderizzati.

Poiché gli strumenti automatici possono rilevare solo una frazione dei fallimenti di contrasto non testuale, i test manuali sono essenziali. Strumenti come Colour Contrast Analyser (TPGi), i selettori di colore degli strumenti di sviluppo del browser o lo strumento Accessible Colors devono essere utilizzati per campionare direttamente i colori di primo piano e di sfondo dall’interfaccia renderizzata. Le scansioni automatiche dovrebbero essere considerate un primo passaggio, non una verifica completa.

Come Testare

1. Esegui una scansione automatizzata con axe DevTools o Lighthouse: Installa l’estensione del browser axe DevTools ed esegui una scansione dell’intera pagina. Nel pannello dei risultati, filtra i problemi contrassegnati con WCAG 1.4.11 o esamina eventuali violazioni di color-contrast. Prendi nota di tutti gli elementi contrassegnati come Needs Review nella categoria del contrasto non testuale — richiedono un follow-up manuale. In Lighthouse (Strumenti di sviluppo di Chrome > scheda Lighthouse), esegui un audit di Accessibilità ed esamina i risultati relativi al contrasto, tenendo presente che anche la copertura di Lighthouse è parziale per gli elementi non testuali.
2. Ispezione manuale con un analizzatore di contrasto dei colori: Scarica e apri l’applicazione desktop TPGi Colour Contrast Analyser. Usa il suo strumento contagocce per campionare il colore di primo piano di ciascun confine di componente UI (ad es. il bordo di un campo di testo, il tratto di un’icona, il riempimento di una barra di un grafico) e poi campiona il colore di sfondo adiacente. Lo strumento mostrerà il rapporto di contrasto calcolato. Qualsiasi rapporto inferiore a 3:1 è un fallimento. Procedi in modo sistematico attraverso tutti i controlli di form interattivi, i pulsanti composti solo da icone, gli indicatori di focus e le visualizzazioni di dati.
3. Navigazione da tastiera e test degli indicatori di focus: Scorri l’intera pagina usando solo la tastiera con il tasto Tab. Per ogni elemento interattivo che riceve il focus, verifica che l’indicatore di focus (anello, contorno o cambiamento di sfondo) sia visibile. Usa l’analizzatore di contrasto per confermare che il colore dell’indicatore di focus raggiunge 3:1 rispetto allo sfondo dell’elemento. Esegui il test con NVDA + Firefox e JAWS + Chrome per confermare che l’elemento riceve il focus nell’ordine previsto e che l’indicatore visivo non è stato rimosso da CSS outline: none senza un equivalente sostitutivo.
4. Test in modalità ad alto contrasto e forced-color: In Windows, attiva la modalità High Contrast (Impostazioni > Accessibilità > High Contrast) e ricarica la pagina. Nei browser basati su Chromium, apri DevTools, vai su Rendering e abilita l’opzione Emulate CSS media feature forced-colors: active. Verifica che i confini dei componenti UI rimangano visibili. Sebbene la conformità alla modalità forced-color non sia strettamente richiesta da 1.4.11, il test in questa modalità rivela elementi che si basano esclusivamente su indizi cromatici a basso contrasto.
5. Verifica gli oggetti grafici nel contesto: Per ogni grafico, icona, diagramma o immagine informativa, identifica ogni segmento o tracciato che trasmette significato. Usa lo strumento contagocce per campionare i colori adiacenti all’interno del grafico stesso (ad es. due segmenti adiacenti di un grafico a torta) e rispetto allo sfondo della pagina circostante. Ogni parte distinta che comunica informazioni deve individualmente raggiungere 3:1.
6. Controlla tutti gli stati dei componenti: Gli elementi interattivi hanno molteplici stati — predefinito, hover, focus, attivo, selezionato, checked, errore e successo. Testa ciascuno stato separatamente. Il bordo di un pulsante che supera il test nel suo stato predefinito può fallire nello stato hover se il colore cambia in una variante a basso contrasto.

Come Correggere

Bordo del campo di input del form — Errato

<!-- Fails: light grey border (#cccccc) on white (#ffffff) = 1.6:1 ratio -->
<style>
  .form-input {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    padding: 8px 12px;
  }
</style>
<label for='email'>Email Address</label>
<input type='email' id='email' class='form-input' />

Bordo del campo di input del form — Corretto

<!-- Passes: darker border (#767676) on white (#ffffff) = 4.54:1 ratio, exceeds 3:1 -->
<style>
  .form-input {
    border: 1px solid #767676; /* Darkened to achieve sufficient contrast */
    background-color: #ffffff;
    padding: 8px 12px;
  }
  .form-input:focus {
    outline: 3px solid #005fcc; /* Focus ring at 5.9:1 against white */
    outline-offset: 2px;
  }
</style>
<label for='email'>Email Address</label>
<input type='email' id='email' class='form-input' />

Pulsante solo icona — Errato

<!-- Fails: light grey icon (#aaaaaa) on white (#ffffff) = 2.32:1 ratio -->
<style>
  .icon-btn { background: none; border: none; color: #aaaaaa; }
</style>
<button class='icon-btn' aria-label='Delete item'>
  <svg aria-hidden='true' focusable='false' width='24' height='24'>
    <path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6' stroke='currentColor' stroke-width='2' fill='none'/>
  </svg>
</button>

Pulsante solo icona — Corretto

<!-- Passes: dark icon (#595959) on white (#ffffff) = 7:1 ratio, well above 3:1 -->
<style>
  .icon-btn { background: none; border: none; color: #595959; cursor: pointer; }
  .icon-btn:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 4px;
  }
</style>
<button class='icon-btn' aria-label='Delete item'>
  <svg aria-hidden='true' focusable='false' width='24' height='24'>
    <!-- Darker stroke ensures the icon shape is perceivable -->
    <path d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6' stroke='currentColor' stroke-width='2' fill='none'/>
  </svg>
</button>

Checkbox personalizzata — Errata

<!-- Fails: custom checkbox uses a light border (#d0d0d0) on white background -->
<style>
  .custom-checkbox-box {
    width: 18px; height: 18px;
    border: 2px solid #d0d0d0; /* 1.3:1 ratio against white — fails */
    border-radius: 3px;
    display: inline-block;
  }
</style>
<label>
  <input type='checkbox' style='position:absolute;opacity:0;width:0;height:0' />
  <span class='custom-checkbox-box'></span>
  I agree to the terms
</label>

Checkbox personalizzata — Corretta

<!-- Passes: border (#5a5a5a) on white = 7.2:1. Checked state tick also uses sufficient contrast -->
<style>
  .custom-checkbox-input {
    position: absolute; opacity: 0; width: 0; height: 0;
  }
  .custom-checkbox-box {
    width: 18px; height: 18px;
    border: 2px solid #5a5a5a; /* Sufficient contrast against white background */
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
  }
  .custom-checkbox-input:checked + .custom-checkbox-box {
    background-color: #005fcc; /* Blue fill on checked */
    border-color: #005fcc;
  }
  .custom-checkbox-input:checked + .custom-checkbox-box::after {
    content: '';
    display: block;
    width: 10px; height: 6px;
    border-left: 2px solid #ffffff; /* White tick on blue = 5.9:1 */
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translateY(-2px);
  }
  .custom-checkbox-input:focus-visible + .custom-checkbox-box {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
</style>
<label class='custom-label'>
  <input type='checkbox' class='custom-checkbox-input' />
  <span class='custom-checkbox-box' aria-hidden='true'></span>
  I agree to the terms
</label>

Grafico dati — Errato

<!-- Fails: two adjacent pie chart segments use similar light hues with <3:1 contrast -->
<svg viewBox='0 0 200 200' aria-label='Market share chart' role='img'>
  <!-- Segment A: #f5c6cb (light pink) adjacent to Segment B: #ffeeba (light yellow) -->
  <!-- Contrast ratio between these two colors is approximately 1.1:1 — fails -->
  <path d='M100,100 L100,10 A90,90 0 0,1 190,100 Z' fill='#f5c6cb' />
  <path d='M100,100 L190,100 A90,90 0 0,1 100,190 Z' fill='#ffeeba' />
</svg>

Grafico dati — Corretto

<!-- Passes: use high-contrast segment fills OR add a visible border between segments -->
<svg viewBox='0 0 200 200' aria-label='Market share chart: Segment A 50%, Segment B 25%' role='img'>
  <!-- Option 1: Use a dark stroke between segments to separate them at 3:1 against both fills -->
  <path d='M100,100 L100,10 A90,90 0 0,1 190,100 Z' fill='#d63384' stroke='#ffffff' stroke-width='2' />
  <path d='M100,100 L190,100 A90,90 0 0,1 100,190 Z' fill='#0d6efd' stroke='#ffffff' stroke-width='2' />
  <!-- The white (#ffffff) stroke separates the two segments; each fill also has 3:1 against white bg -->
</svg>

Errori Comuni

• Usare un bordo di un solo pixel che rispetta 3:1 ma diventa invisibile a basso DPI: Anche un colore conforme può diventare impercettibile se il bordo è largo solo 1px su uno schermo a bassa risoluzione. Usa border: 2px solid o un box-shadow visibile insieme a un colore conforme per garantire che il confine sia fisicamente percepibile.
• Dare per scontato che lo sfondo sia sempre bianco: Quando un campo di form o un’icona appare all’interno di una card o di una sidebar con uno sfondo grigio chiaro (#f5f5f5), il contrasto deve essere misurato rispetto a quel grigio, non rispetto al bianco. Un bordo che supera il test sul bianco può fallire su uno sfondo leggermente colorato.
• Rimuovere il contorno di focus predefinito con outline: none senza fornire un equivalente: Questo è uno dei fallimenti più comuni di 1.4.11. Impostare globalmente :focus { outline: none; } distrugge la visibilità del focus per chi usa la tastiera. Sostituiscilo sempre con uno stile di focus personalizzato che raggiunga almeno 3:1 di contrasto rispetto al suo sfondo.
• Trattare lo stato disabilitato come una scusa per saltare tutti i controlli di contrasto: I componenti disabilitati sono esentati, ma a volte chi sviluppa contrassegna elementi come visivamente disabilitati tramite uno stile a basso contrasto senza aggiungere effettivamente l’attributo disabled o aria-disabled='true'. Un elemento che sembra disabilitato ma è ancora interattivo deve comunque rispettare 1.4.11.
• Affidarsi esclusivamente al colore per differenziare i segmenti di un grafico senza un tratto di separazione: Due segmenti adiacenti di un grafico in cui l’unico elemento distintivo è la tonalità (ad es. azzurro chiaro vs. verde chiaro) possono fallire se il loro rapporto di contrasto è inferiore a 3:1. Aggiungere un tratto di separazione di 2px bianco o scuro tra i segmenti è una correzione affidabile.
• Applicare le correzioni di contrasto solo allo stato predefinito e dimenticare gli stati hover, focus, errore e successo: Ogni stato interattivo ha la propria presentazione visiva. Il bordo di un pulsante che supera il test nello stato predefinito può passare a un colore a basso contrasto in hover. Tutti gli stati devono essere testati in modo indipendente.
• Incorporare icone come immagini di sfondo e affidarsi al colore CSS per il contrasto: Le icone SVG in linea nell’HTML rispondono a color e currentColor, ma le icone usate come background-image CSS non possono essere ricolorate tramite CSS. Se il file dell’icona ha di per sé un contrasto insufficiente, nessuna correzione CSS può risolvere il problema senza sostituire la risorsa.
• Dimenticare che il testo segnaposto (placeholder) nei campi di input non è coperto da 1.4.11 ma è comunque regolamentato: Il testo segnaposto rientra in 1.4.3 (contrasto del testo a 4.5:1), non in 1.4.11. A volte chi sviluppa applica per errore la soglia 3:1 al testo segnaposto, creando un fallimento separato e non rilevato di 1.4.3.
• Usare transizioni CSS che animano attraverso un colore intermedio non conforme: Un elemento può animare da un colore conforme, passare attraverso un colore intermedio non conforme e arrivare a un altro colore conforme. Anche se gli stati iniziale e finale superano il test, il componente visivo è tecnicamente non conforme durante la transizione. Usa con attenzione le media query prefers-reduced-motion ed evita di far passare le transizioni attraverso stati a basso contrasto.
• Ignorare barre di avanzamento, input di tipo range e interruttori toggle: Questi componenti UI personalizzati sono spesso stilizzati senza considerare 1.4.11. La parte riempita di una barra di avanzamento deve avere 3:1 di contrasto rispetto al suo tracciato; il pomello di un interruttore deve contrastare rispetto allo sfondo dell’interruttore; il thumb di un input range deve contrastare rispetto al tracciato.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale n. 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce requisiti obbligatori di accessibilità web e mobile per un’ampia gamma di soggetti pubblici e privati che operano in Turchia. La Circolare adotta WCAG 2.2 come standard tecnico normativo e la conformità al livello AA è la soglia richiesta per la conformità.

WCAG 1.4.11 Contrasto non testuale, in quanto criterio di livello AA, è quindi direttamente applicabile ai sensi della Circolare. Le organizzazioni soggette al regolamento devono garantire che tutti i confini dei componenti UI, gli stati dei controlli interattivi e gli oggetti grafici significativi presenti nelle loro proprietà digitali rispettino il requisito di contrasto non testuale di 3:1.

I soggetti coperti dalla Circolare Presidenziale 2025/10 includono istituzioni e agenzie pubbliche a tutti i livelli di governo, piattaforme di e-commerce, banche e istituzioni finanziarie, ospedali e fornitori privati di servizi sanitari, operatori di telecomunicazioni con 200.000 o più abbonati, agenzie di viaggio, società di trasporto private e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE). Per queste organizzazioni, il mancato rispetto di 1.4.11 non è semplicemente una mancanza di best practice, ma una non conformità normativa.

Il Logo di Accessibilità (Erişilebilirlik Logosu), rilasciato dal Ministero della Famiglia e dei Servizi Sociali, funge da marchio di certificazione visibile al pubblico per i servizi digitali conformi. Per ottenere e mostrare questo logo, un’organizzazione deve dimostrare la piena conformità al livello AA per tutti i criteri WCAG 2.2 applicabili, incluso 1.4.11. Poiché molti portali di e-government turchi, interfacce bancarie e moduli sanitari fanno ampio uso di controlli di form personalizzati e visualizzazioni di dati, il contrasto non testuale è un criterio che chi effettua gli audit è particolarmente propenso a valutare durante il processo di certificazione.

Le organizzazioni che utilizzano il widget overlay Accsible dovrebbero essere consapevoli che la tecnologia overlay può aiutare a correggere alcuni aggiustamenti di contrasto in fase di esecuzione — ad esempio consentendo alle persone di attivare un tema ad alto contrasto — ma i fallimenti strutturali persistenti, come un campo di input del form renderizzato con un bordo con contrasto 1.6:1, devono essere corretti a livello di codice sorgente per ottenere una conformità reale e qualificarsi per l’Erişilebilirlik Logosu. Combinare correzioni a livello di sorgente con le funzionalità di miglioramento lato utente di un widget di accessibilità rappresenta la posizione di conformità più difendibile ai sensi della legge turca.