Aggiorna il contrasto del colore del testo
Tutti dovrebbero essere in grado di leggere il tuo testo
È importante che il testo sia visibile e leggibile. Se vuoi che i tuoi visitatori lo capiscano, devono essere in grado di leggerlo.
Un buon contrasto del testo assicura che tutti possano vedere il testo sullo sfondo su cui si trova.
Non tutti vedono il colore allo stesso modo. WCAG ha definito requisiti specifici di contrasto nelle linee guida WCAG 2.2 AA per garantire che il testo sia leggibile da tutti. Segui questi requisiti e le nostre best practice per il contrasto per risolvere o prevenire problemi di contrasto.
Ally segue i requisiti di contrasto per verificare che il contrasto tra il colore del testo e il colore di sfondo sia sufficiente. Lo scarso contrasto del testo è un problema importante. I problemi principali influiscono sull'accessibilità e, sebbene non gravi, richiedono attenzione.
Usa Ally per trovare testo con scarso contrasto
Utilizza il report di accessibilità di Ally per scoprire e risolvere i problemi di accessibilità del tuo sito. Utilizza il link fornito per il report ed effettua l'accesso. Apri il report e consulta l'elenco dei problemi nella tabella Problemi di accessibilità.
Suggerimento
La tabella Problemi di accessibilità si trova sia nella scheda Panoramica che in quella Dominio. Iniziare dalla scheda Dominio per visualizzare i problemi specifici di un dominio.
È un grosso problema avere un testo con scarso contrasto. Utilizzare la scheda Principali nella tabella Accessibilità per visualizzare l'elenco dei problemi principali. Seleziona i problemi relativi ai problemi di contrasto.
Suggerimento
Se inizi dalla scheda Panoramica seleziona il problema e quindi il dominio con il problema.
Suggerimento
I problemi di contrasto possono iniziare con Documento o HTML nell'elenco.
Dall'elenco dei problemi di contrasto nel dominio, seleziona l'indicatore del punteggio accanto a un elemento con il problema. Si apre il pannello di feedback dell'editor di contenuti.
Visualizza l'anteprima del testo con scarso contrasto
Il pannello di feedback di Ally ti mostra un'anteprima del contenuto, oltre a feedback dettagliati e supporto per aiutarti a risolvere i tuoi problemi di accessibilità. Usa l'anteprima per vedere il testo con scarso contrasto.
L'anteprima evidenzia i punti in cui è possibile individuare problemi specifici di accessibilità nel documento. Gli highlights mostrano ogni occorrenza di un tipo di problema alla volta. Ad esempio, se il testo ha un contrasto scarso, gli highlights mostrano ogni punto in cui si verifica questo problema specifico.
Strumenti di anteprima
Utilizza gli strumenti di anteprima per esplorare i problemi nel tuo documento.
Spostati nell'anteprima pagina per pagina.
Guarda quante volte viene visualizzato un problema specifico.
Salta tra gli highlights del problema.
Nascondi o mostra gli highlights.
Ingrandisci o riduci il contenuto dell'anteprima.
Se il problema si trova in un documento allegato, scaricare il file originale.
Segui i passaggi guidati di Ally per correggere lo scarso contrasto
Importante
Ally presume che tu abbia una conoscenza di base dell'HTML e di come utilizzare il tuo sistema di gestione dei contenuti (CMS). Per seguire i passaggi guidati è necessario sapere come modificare una pagina web in HTML o nel codice sorgente del tuo CMS.
Importante
Ally presume anche che tu abbia l'autorizzazione per aggiornare il colore sul tuo sito web. Il colore è spesso definito nella guida di stile di un sito e può riflettere il branding. Prima di apportare modifiche, consulta la guida di stile del tuo sito.
Insieme all'anteprima, Ally ti fornisce una guida passo passo su come risolvere il problema. Ally organizza questo feedback in un albero decisionale. Tutto quello che devi fare è leggere le indicazioni e rispondere alle richieste. Scopri qual è il problema, perché è importante e come correggerlo in modo appropriato.
Seleziona Come correggere il contrasto per seguire i passaggi guidati.
Metodi per risolvere i problemi di contrasto
Quando il testo ha un contrasto scarso, significa che non c'è abbastanza contrasto di colore tra il testo e lo sfondo su cui si trova.
I passaggi guidati di Ally spiegano come cambiare il colore del testo. Puoi anche cambiare il colore di sfondo.
Importante
Prima di apportare modifiche, consulta la guida di stile del tuo sito. Il colore è spesso correlato al marchio e dovrebbe essere cambiato con cautela.
I passaggi guidati di Ally spiegano anche come apportare gli aggiornamenti nel codice HTML sorgente delle singole pagine web. I CMS possono variare. Alcuni CMS dispongono di un editor di testo RTE (Rich Text Editor) che può fornire metodi intuitivi per applicare uno stile al testo. Con gli RTE è possibile scegliere lo stile preimpostato per intestazioni, colori, caratteri, immagini e così via. Tuttavia, non tutti i CMS forniscono un RTE e richiedono modifiche al codice sorgente con HTML. A volte sono disponibili sia HTML che RTE.
Per problemi di contrasto ricorrenti, è possibile aggiornare il modello. Gli aggiornamenti dei modelli richiedono determinate conoscenze di HTML e CSS e possono dipendere dal marchio del tuo sito.
Suggerimento
Visita w3schools per saperne di più su HTML e CSS
Colore HEX o RGB
HEX e RGB sono modi diversi per definire il colore.
RGB definisce il colore in base alla quantità di rosso (R), verde (G) e blu (B) utilizzati. Ad esempio, una tonalità di rosso potrebbe essere definita come RGB (253, 2, 2).
HEX è un formato esadecimale che definisce un colore in base ai valori rosso, verde e blu in una combinazione di sei lettere e numeri. Gli esadecimali iniziano con il simbolo del numero o dell'hashtag (#). Ad esempio, la stessa tonalità di rosso verrebbe definita come #fd0202.
L'esadecimale è il modo più comune per definire i colori nelle pagine web.
Best practice per il contrasto del testo
Ci sono molte regolazioni a basso sforzo che puoi apportare per migliorare la leggibilità del testo.
Usa caratteri con tratti di carattere larghi.
Usa una dimensione del carattere di almeno 12px. Se si utilizza un carattere con tratti di carattere sottili, utilizzare almeno 16 px.
Usa solo caratteri "sottili" su sfondi scuri.
Usa testo chiaro su sfondi scuri.
Usa testo scuro su sfondi chiari.
Evita queste combinazioni di colori:
Verde e rosso
Verde e marrone
Blu e viola
Verde e blu
Verde chiaro e ;giallo
Blu e grigio
Verde e grigio
Verde e nero
Suggerimento
Non sei sicuro che il tuo testo abbia abbastanza contrasto? Utilizza l'Colour Contrast Analyser del Paciello Group per controllare i tuoi contenuti.
Perché il contrasto del testo è importante?
Il testo a basso contrasto può essere difficile da leggere in molte situazioni.
Quando proiettato in classe
Per studenti daltonici
Su un cellulare con una luce intensa o un bagliore sullo schermo
Su monitor di bassa qualità
Un basso contrasto può causare affaticamento degli occhi, rendere difficile l'individuazione e la scansione dei contenuti e causare frustrazione.
Un buon contrasto significa che tutti possono vedere chiaramente il testo e godere di una migliore esperienza complessiva di lettura dei contenuti.