Aggiornare il contrasto di colore del testo

Il testo deve risultare leggibile per tutti

È importante che il testo sia ben visibile e leggibile. Se vuoi che i visitatori siano in grado di comprenderlo, dovrai assicurarti che siano in grado di leggerlo.

Un buon contrasto fa in modo che tutti siano in grado di leggere il testo sul relativo sfondo.

Non tutti vedono i colori allo stesso modo. WCAG ha definito dei requisiti di contrasto specifici nelle linee guida WCAG 2.1 AA per garantire che il testo risulti leggibile per tutti. Segui questi requisiti e le nostre best practice per il contrasto per risolvere o prevenire eventuali problemi di contrasto.

Ally si attiene ai requisiti di contrasto per verificare che ci sia un contrasto sufficiente tra il colore del testo e quello dello sfondo. Uno scarso contrasto è un problema di livello Serio. Questi problemi hanno un impatto sull’accessibilità e, pur non essendo critici, richiedono attenzione.

Usare Ally per individuare il testo con uno scarso contrasto

Usa il report sull’accessibilità di Ally per individuare e correggere eventuali problemi di accessibilità presenti nel tuo sito. Usa il link fornito per il report e accedi. Apri il report e guarda l’elenco dei problemi nella tabella Problemi di accessibilità.

La tabella Problemi di accessibilità si trova nella scheda Panoramica e nella scheda Dominio. Inizia dalla scheda Dominio per visualizzare i problemi specifici di un dominio. 

Uno scarso contrasto è un errore di livello Serio. Usa la scheda Serio della tabella Problemi di accessibilità per visualizzare l’elenco dei problemi di livello Serio. Seleziona gli elementi con problemi di contrasto.

Se inizi dalla scheda Panoramica seleziona il problema, quindi il dominio che presenta tale problema.

Nell’elenco, i problemi relativi al contrasto possono iniziare con Documento o HTML.

Nell’elenco dei problemi di contrasto, seleziona l’indicatore del punteggio accanto al contenuto che presenta il problema. Viene visualizzato il riquadro del feedback dell’editor dei contenuti.

Visualizzare il testo con uno scarso contrasto

Il riquadro del feedback di Ally mostra un’anteprima del contenuto oltre a un feedback dettagliato e alle informazioni di supporto per risolvere i problemi di accessibilità. Usa l’anteprima per visualizzare il testo con uno scarso contrasto.

L’anteprima evidenzia le aree specifiche in cui si trovano i problemi di accessibilità all’interno del documento. Le parti evidenziate mostrano contemporaneamente tutte le occorrenze di un determinato tipo di problema. Ad esempio, se il testo presenta uno scarso contrasto, le parti evidenziate mostrano ogni area in cui si ripete questo specifico problema.

Strumenti di anteprima

Usa gli strumenti di anteprima per visualizzare i problemi presenti nel documento.

• Sfoglia l’anteprima pagina per pagina.
• Guarda quante volte si verifica un determinato problema.
• Passa da un’evidenziazione all’altra.
• Mostra o nascondi le evidenziazioni.
• Usa lo zoom per ingrandire o rimpicciolire l’anteprima dei contenuti.
• Se il problema si trova in un documento allegato, scarica il file originale.

Seguire la procedura guidata di Ally per risolvere i problemi relativi allo scarso contrasto

Ally parte dal presupposto che tu abbia una conoscenza basilare del codice HTML e di come usare il Content Management System (CMS). Per seguire la procedura guidata, devi sapere come modificare una pagina web nel codice HTML o sorgente del CMS.

Ally parte dal presupposto che tu abbia le autorizzazioni per modificare il colore sul sito web. Il colore è spesso definito nella guida di stile del sito e può dipendere dal brand. Prima di apportare modifiche, consulta la guida di stile del tuo sito. 

Assieme all’anteprima, Ally fornisce una procedura guidata dettagliata su come risolvere il problema. Ally organizza il feedback sotto forma di struttura ad albero di decisione. Tutto ciò che devi fare è leggere le indicazioni e rispondere ai messaggi visualizzati sullo schermo. Scopri qual è il problema, perché è importante e come correggerlo in modo opportuno.

Seleziona Come sistemare il contrasto per seguire la procedura guidata.

Modi per risolvere i problemi di contrasto

Quando un testo ha uno scarso contrasto significa che non è presente un contrasto di colore sufficiente tra il testo e lo sfondo su cui è scritto.

La procedura guidata di Ally spiega come modificare il colore del testo. Puoi anche modificare il colore dello sfondo. 

Prima di eseguire qualsiasi modifica, consulta la guida di stile del tuo sito. Il colore è spesso relativo al brand e deve essere cambiato con cautela.

La procedura guidata di Ally spiega anche come effettuare aggiornare il codice HTML sorgente delle singole pagine web. I CMS possono variare. Alcuni CMS hanno un Rich Text Editor (RTE) che offre metodi intuitivi per applicare gli stili del testo. Con il Rich Text Editor è possibile scegliere uno stile predefinito per intestazioni, colori, caratteri, immagini e così via. Tuttavia, non tutti i CMS forniscono un Rich Text Editor; a volte richiedono di effettuare le modifiche nel codice sorgente con il codice HTML. A volte, sono disponibili sia il codice HTML che il Rich Text Editor.

Per i problemi di contrasto ricorrenti, puoi aggiornare direttamente i modelli di partenza. L’aggiornamento dei modelli richiede una certa conoscenza del codice HTML e di CSS e può dipendere dal brand del tuo sito. 

Visita il sito w3schools per ulteriori informazioni sul codice HTML e CSS.

Colori HEX o RGB

HEX e RGB sono due diversi modi in cui può essere definito il colore.

• RGB definisce i colori in base alla quantità di rosso (R), verde (G) e blu (B) utilizzata. Ad esempio, una sfumatura di rosso può 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. I valori esadecimali iniziano con un numero o con il simbolo cancelletto (#). Ad esempio, la stessa sfumatura di rosso viene identificata come #fd0202.

Il valore esadecimale è il modo più comune per definire i colori nelle pagine web.

Best practice per il contrasto del testo

Per migliorare la leggibilità del testo puoi adottare alcuni accorgimenti che richiedono uno sforzo davvero minimo.

• Usa caratteri con tratti ampi.
• Usa una dimensione dei caratteri di almeno 12 px. Se hai scelto un carattere dai tratti sottili, usa una dimensione di almeno 16 px.
• Usa caratteri dai tratti “sottili” solo su sfondi scuri.
• Usa un testo di colore chiaro su uno sfondo scuro.
• Usa un testo di colore scuro su uno sfondo chiaro.
• Evita le seguenti 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

Non sai se il contrasto del testo è sufficiente? Usa Colour Contrast Analyser sviluppato da The Paciello Group per analizzare i tuoi contenuti.

Perché il contrasto del testo è importante?

Un testo con uno scarso contrasto può essere difficile da leggere in diverse situazioni:

• Quando viene proiettato in aula
• Per gli studenti affetti da daltonismo
• Su un dispositivo mobile con una luminosità elevata o con il riflesso sullo schermo
• Su monitor di bassa qualità

Uno scarso contrasto comporta uno sforzo della vista, rende i contenuti difficili da consultare e scansionare e genera frustrazione negli utenti.

Un buon contrasto consente a chiunque di vedere il testo chiaramente e, in generale, offre una migliore esperienza durante la lettura dei contenuti.