Come correggere l'errore di accessibilità "I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente".

L'ottimizzazione del sito web non riguarda solo i tempi di caricamento. Un sito web veloce rende felici le persone, ma solo se offre allo stesso tempo un'ottima esperienza utente. Se il tuo sito web non è accessibile, potresti visualizzare avvisi come "I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente". Questo particolare errore significa che gli utenti potrebbero avere difficoltà a distinguere determinati elementi nella pagina.

Fortunatamente, questo problema è abbastanza facile da risolvere. Inoltre, se esegui il test del tuo sito Web su PageSpeed ​​Insights, riceverai anche alcune istruzioni di base su come correggere l'errore e aumentare l'accessibilità del tuo sito.

Qual è il messaggio "I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente"?

Se utilizzi PageSpeed ​​Insights per controllare le prestazioni del tuo sito web, noterai che restituisce un rapporto con suggerimenti per l'ottimizzazione dei tuoi contenuti. Questi includono suggerimenti per migliorare l'accessibilità sul tuo sito:

L'accessibilità è essenziale per il successo di qualsiasi sito web. Se il tuo sito non è accessibile o facile da usare, perderai i visitatori guadagnati con tanto impegno.

Ci sono molti fattori che contribuiscono a rendere accessibile un sito web. Ad esempio, ti consigliamo di utilizzare caratteri facili da leggere, etichettare correttamente i collegamenti e abilitare la navigazione da tastiera.

È inoltre essenziale utilizzare un contrasto sufficiente sul tuo sito. Ciò significa scegliere colori di sfondo che consentano agli utenti di vedere gli elementi chiave di una pagina.

L'errore "I colori di sfondo e primo piano non hanno un rapporto di contrasto sufficiente" indica che il rapporto di contrasto tra i due elementi non soddisfa gli standard consigliati. Ad esempio, potresti utilizzare una tonalità di grigio simile sia per lo sfondo che per il testo.

Questi standard sono stabiliti dalle Web Content Accessibility Guidelines (WCAG) ^[1] . Si tratta di un insieme di linee guida riconosciute a livello internazionale per rendere i contenuti web più accessibili. WCAG suggerisce un rapporto di contrasto minimo di 4,5:1 per il testo normale e di 3:1 per il testo di grandi dimensioni per garantire una leggibilità ottimale.

Se non sei sicuro di come funzionano questi rapporti, non preoccuparti. Li esamineremo più da vicino nel tutorial.

L'importanza del contrasto nell'accessibilità web

Il contrasto gioca un ruolo cruciale nell'accessibilità del web. Rende più facile per gli utenti individuare gli elementi più importanti di una pagina.

Prendi un invito all'azione (CTA), ad esempio. Questi elementi tendono a utilizzare colori che risaltano rispetto allo sfondo, quindi sono più facili da vedere.

Poiché questi elementi in grassetto attirano la tua attenzione, è più probabile che tu faccia clic su di essi:

Tuttavia, un buon rapporto di contrasto non ti avvantaggia solo in termini di conversioni o coinvolgimento. Rende anche le cose un po' più facili per gli utenti con disabilità visive.

Nella maggior parte dei casi, è facile evitare l'errore "I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente". Ad esempio, alcuni page builder includono strumenti visivi per la selezione dei colori che ti aiutano a tenere d'occhio il contrasto.

Come correggere l'errore di accessibilità "I colori di sfondo e in primo piano non hanno un rapporto di contrasto sufficiente".

Uno scarso rapporto di contrasto può alienare una parte dei tuoi visitatori. Inoltre, questa mancanza di accessibilità si rifletterà negativamente sulla tua attività. Pertanto, diamo un'occhiata a come risolverlo.

• Passaggio 1: identificare quali elementi mostrano un basso contrasto
• Passaggio 2: determina il rapporto di contrasto dei tuoi elementi
• Passaggio 3: regola i colori per soddisfare il rapporto di contrasto consigliato

Passaggio 1: identificare quali elementi mostrano un basso contrasto

PageSpeed ​​Insights può aiutarti a individuare gli elementi della tua pagina con un contrasto insufficiente. Per iniziare, devi generare un rapporto per la pagina che desideri testare. Quindi, scorri verso il basso fino alla sezione Accessibilità e dai un'occhiata ai consigli.

Se visualizzi il messaggio "I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente", puoi fare clic su di esso per visualizzare un elenco degli elementi in questione, inclusa la loro classe CSS:

Poiché PageSpeed ​​Insights ti consente di testare solo una pagina alla volta, questi elementi dovrebbero essere facili da identificare. Tuttavia, se non sei sicuro, puoi utilizzare lo strumento di ispezione del tuo browser per cercare il codice di quell'elemento all'interno della tua pagina.

Passaggio 2: determina il rapporto di contrasto dei tuoi elementi

Qui è dove le cose si fanno divertenti. Una volta che sai quali elementi devi controllare, ti consigliamo di utilizzare uno strumento di selezione dei colori o un'estensione all'interno del tuo browser. Questi sono strumenti che ti consentono di fare clic su parti specifiche di una pagina e vedere il suo codice esadecimale univoco.

Se utilizzi Chrome, puoi prendere in considerazione le estensioni di Chrome come Smart Color Picker o Geco. Per macOS, puoi provare ColorSlurp. Qualunque strumento tu scelga, puoi usarlo per ottenere il codice esadecimale sia per gli elementi in primo piano che per quelli di sfondo che mostrano un contrasto insufficiente.

Quando disponi di entrambi i codici esadecimali, dovrai utilizzare WebAIM Contrast Checker per controllarli. Questo strumento ti mostrerà automaticamente il rapporto di contrasto tra questi colori:

Ti dirà anche se i colori che stai utilizzando soddisfano le linee guida sull'accessibilità WCAG. Se ottieni tutti i pass, sei a posto. In caso contrario, ti consigliamo di regolare i colori utilizzando le barre sotto i codici finché non trovi una giusta via di mezzo.

Passaggio 3: regola i colori per soddisfare il rapporto di contrasto consigliato

Quest'ultimo passaggio è semplice, in particolare se utilizzi WordPress (che è una piattaforma altamente accessibile). I passaggi esatti variano a seconda di come modifichi le tue pagine.

Se utilizzi l'Editor blocchi, puoi fare clic su qualsiasi blocco per accedere alle sue impostazioni. Da lì, sarai in grado di modificare il colore:

Ogni opzione del menu Colore consente di modificare un elemento specifico all'interno del blocco, come il testo o lo sfondo. Quando selezioni un'opzione, apparirà un selettore di colori.

Ora, fai clic sul gradiente e inserisci il codice esadecimale che desideri utilizzare:

Una volta impostato, salva le modifiche alla pagina e testala utilizzando PageSpeed ​​Insights. Se i nuovi colori hanno un rapporto di contrasto sufficiente, il messaggio di errore non verrà più visualizzato.

Per altri contenuti, potresti dover modificare le cose utilizzando le impostazioni del tuo tema nel Customizer o potenzialmente del codice CSS personalizzato.

Correggi gli errori del rapporto di contrasto del colore per sempre

Ecco cosa devi fare se ti imbatti in questo errore:

• Identifica quali elementi mostrano un basso contrasto.
• Determina il rapporto di contrasto dei tuoi elementi, utilizzando uno strumento come WebAIM Contrast Checker.
• Regola i colori sulla pagina per soddisfare il rapporto di contrasto consigliato.

Hai ancora domande su come correggere l'errore "I colori di sfondo e in primo piano non hanno un rapporto di contrasto sufficiente" in PageSpeed ​​Insights? Fateci sapere nei commenti!