Perché il contrasto dei colori è importante per l'accessibilità web
Scopri come la scelta dei colori può impedire alle persone con disabilità visive di leggere o navigare facilmente sul tuo sito web.
Autore: Missy Jensen, Senior SEO Copywriter
Pubblicato: 13/10/2023
)
Ci sono molte considerazioni di design che contribuiscono all'accessibilità di un sito web — dal layout dei contenuti all'uso di immagini e tipografia.
Tuttavia, la scelta dei colori è una delle prime cose che le persone notano quando visitano il tuo sito. E se sbagli, può influenzare l'esperienza utente di tutti i visitatori — non solo di quelli con disabilità visive.
Infatti, le tue scelte cromatiche — e le relazioni tra queste tonalità — possono avere un enorme impatto sull'esperienza utente. Se scegli colori che non hanno abbastanza contrasto, alcune parti del tuo sito potrebbero essere difficili da leggere e navigare per le persone con disabilità visive.
)
Cos'è il contrasto dei colori?
Tecnicamente, il contrasto dei colori è la relazione tra la luminanza di due colori. In termini più semplici, puoi pensare alla luminanza come alla luminosità di un colore: il bianco puro ha la luminanza più alta e il nero puro la più bassa.
Il contrasto viene solitamente espresso come un rapporto, dove un numero più alto indica un maggiore grado di contrasto tra i due colori. Ad esempio, bianco e nero hanno un rapporto di contrasto di 21:1 (il massimo possibile), mentre bianco e giallo hanno un rapporto di contrasto di appena 1.07:1.
Quando due colori sono sovrapposti — ad esempio, quando hai del testo di un colore su uno sfondo di una tonalità diversa — i vantaggi di un alto rapporto di contrasto diventano evidenti. Leggere testo bianco su sfondo nero è molto più facile che leggerlo su sfondo giallo.
Verifica il contrasto dei tuoi colori
)
Utilizza un verificatore di contrasto dei colori per vedere se i tuoi colori rispettano i requisiti delle Web Content Accessibility Guidelines (WCAG).
)
Perché il contrasto dei colori è importante?
Per molte persone con disabilità visive, il contrasto dei colori può fare la differenza tra un sito facile da leggere e navigare e uno completamente illeggibile. Molti tipi di disabilità visiva — dalla miopia e ipermetropia alla retinopatia diabetica e degenerazione maculare — possono rendere più difficile la lettura del testo quando il contrasto dei colori è basso.
Un basso contrasto può anche causare problemi alle persone daltoniche, anche se la loro vista è altrimenti perfetta. Se due colori molto diversi hanno una luminanza quasi identica, possono essere quasi impossibili da distinguere.
)
Il contrasto dei colori gioca anche un ruolo significativo nell'esperienza utente della popolazione anziana. L'acuità visiva tende a diminuire intorno ai 70 anni(opens in a new tab), anche se gli occhi sono sempre stati sani.
Tra i problemi visivi più comuni che le persone anziane sperimentano c'è la bassa sensibilità al contrasto(opens in a new tab). Se il tuo sito web non è costruito tenendo conto dell'accessibilità del contrasto dei colori, rischi di escludere una grande percentuale di visitatori dall'utilizzo dei tuoi servizi online o dall'acquisto dei tuoi prodotti.
)
Contrasto dei colori e leggi sull'accessibilità
L' Americans with Disabilities Act(opens in a new tab) (ADA) è una delle principali legislazioni che vieta la discriminazione basata sulla disabilità. Poiché l'ADA è stata firmata nel 1990, non include un linguaggio diretto riguardo a Internet — né criteri legali specifici per l'implementazione dell'accessibilità digitale.
Invece, i tribunali e il Dipartimento di Giustizia (DOJ) si affidano alle Web Content Accessibility Guidelines(opens in a new tab) (WCAG), lo standard internazionale de facto per l'accessibilità digitale.
Secondo l'ADA, le WCAG sono quasi sempre citate in cause e accordi legali — e i precedenti mostrano che rispettare le WCAG è fondamentale per la conformità all'ADA.
Oltre all'ADA, anche l' European Accessibility Act(opens in a new tab) (EAA) e l' Accessibility for Ontarians with Disabilities Act(opens in a new tab) (AODA) si basano sugli standard WCAG per l'accessibilità.
)
Cosa dicono le WCAG sul contrasto dei colori?
Secondo il WCAG Success Criterion (SC) 1.4.3: Contrast (Minimum)(opens in a new tab), la presentazione visiva del testo e delle immagini di testo deve avere un rapporto di contrasto di almeno 4.5:1.
Ci sono tre eccezioni al requisito di contrasto di 4.5:1: testo grande, testo incidentale e logotipi.
Testo grande: Il testo grande è più facile da leggere, quindi il requisito di contrasto è ridotto a 3:1. Le WCAG definiscono testo grande quello di 18pt o più, oppure 14pt o più se in grassetto.
Incidentale: Testo o immagini di testo che fanno parte di un componente inattivo dell'interfaccia utente, che sono pura decorazione, che non sono visibili a nessuno, o che fanno parte di un'immagine che contiene altri contenuti visivi significativi, non hanno requisiti di contrasto.
Logotipi: Il testo che fa parte di un logo o di un nome di marca non ha requisiti di contrasto.
È importante testare attivamente i rapporti di contrasto, perché non è sempre ovvio quali combinazioni di colori abbiano un basso contrasto. Ad esempio, il testo bianco su uno sfondo rosso (utilizzato da molti brand su molti siti) ha un rapporto di contrasto di appena 3.99:1. Ciò significa che è conforme alle WCAG solo se utilizzato con font grandi o in grassetto.
)
Come posso rendere il mio sito più accessibile?
Ecco due consigli rapidi per aiutarti a garantire che i tuoi colori siano accessibili:
Non usare il colore come unico metodo per trasmettere informazioni: I siti web spesso usano testo verde e rosso per indicare messaggi di successo o errore. Tuttavia, il daltonismo rosso-verde è la forma più comune di deficit della visione dei colori (CVD). E ricorda: chiunque sia cieco è anche daltonico, quindi assicurati che eventuali avvisi di successo/errore (come un campo modulo mancante) siano comunicati anche a livello programmatico.
Sottolinea i link inline: Lo stile dei tuoi link inline dovrebbe prevedere una sottolineatura — il colore non basta. La maggior parte degli utenti si aspetta di vedere i link sottolineati e la sottolineatura aiuta a garantire che le persone con disabilità visive possano identificare i link.
Vuoi assicurarti che i tuoi colori siano accessibili? Prova qualsiasi combinazione di colori sul tuo sito utilizzando il Color Contrast Checker gratuito di AudioEye.
Oppure, ottieni una scansione gratuita di qualsiasi URL per identificare eventuali problemi di accessibilità sul tuo sito web.
Condividi articolo
)
)
)