Come correggere l’errore di accessibilità “Il rapporto di contrasto tra i colori di sfondo e primo piano non è sufficiente”.
Come correggere l’errore di accessibilità “Il rapporto di contrasto tra i colori di sfondo e primo piano non è 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: “Il rapporto di contrasto tra i colori di sfondo e primo piano non è 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 testi il tuo sito web su PageSpeed Insights, riceverai anche alcune istruzioni di base su come correggere l’errore e aumentare l’accessibilità del tuo sito.
In questo articolo, spiegheremo cosa significa l’errore “Il rapporto di contrasto tra i colori Html di sfondo e primo piano non è sufficiente” e perché il contrasto è così importante per l’accessibilità web.
Quindi, ti mostreremo come risolverlo utilizzando gli strumenti a tua disposizione. Diamoci da fare!
Se utilizzi PageSpeed Insights per verificare 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 “Il rapporto di contrasto tra i colori di sfondo e primo piano non è 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 funzionino 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 una call to action (CTA), ad esempio. Questi elementi tendono a utilizzare colori che si distinguono dallo 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:
Un CTA con un buon rapporto di contrasto.
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 “l rapporto di contrasto tra i colori di sfondo e primo piano non è 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à “l rapporto di contrasto tra i colori di sfondo e primo piano non è 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, dovrai 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:
Elenco di elementi con scarso rapporto di contrasto su PageSpeed Insights.
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:
Accesso al menu di stile per un blocco in WordPress.
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 Personalizzatore o potenzialmente del codice CSS personalizzato.
Sali in cima a Google
Correggi gli errori del rapporto di contrasto del colore per sempre
Quando utilizzi PageSpeed Insights per testare le prestazioni del tuo sito, riceverai anche un rapporto sull’accessibilità. Se viene visualizzato l’avviso “I colori di sfondo e di primo piano non hanno un rapporto di contrasto sufficiente”, significa che gli utenti con disabilità visive potrebbero avere difficoltà a vedere gli elementi sulla pagina.
Migliora l’accessibilità del tuo #sito web ️ correggendo il rapporto di contrasto dei tuoi #colori:
- 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.
