Accessibilità: preparare il testo e la grafica
5 min
In questo articolo:
- I nostri consigli
- Trovare i codici colore
- Regolare il contrasto del colore
I visitatori con problemi o difficoltà visive potrebbero avere difficoltà a distinguere tra il primo piano e lo sfondo delle pagine di un sito. Pertanto, ti consigliamo di controllare e regolare il contrasto del colore sul tuo sito, se necessario.
I nostri consigli
Al fine di aumentare l'accessibilità per i visitatori con esigenze visive diverse, ti consigliamo quanto segue:
- Modificare il colore del testo e il contrasto del colore di sfondo a un rapporto di 4,5: 1 per il testo normale e 3: 1 per il testo di grandi dimensioni
- Un rapporto di contrasto di almeno 3: 1 per la grafica e i componenti dell'interfaccia utente (come i bordi di input del modulo, i testi segnaposto, ecc.)
- Il livello AAA richiede un rapporto di contrasto maggiore di almeno 7: 1 per il testo normale e di 4.5: 1 per il testo di grandi dimensioni
Lo sapevi che:
Il testo grande è definito come superiore a 14 punti (circa 18 px) e grassetto, o 18 punti (circa 24 px).
Trovare i codici colore
Puoi trovare i codici colore in qualsiasi site builder che stai utilizzando (Editor Studio o Editor Wix).
Editor Wix
Editor Studio
- Seleziona l'elemento pertinente (testo, sfondo della striscia, riquadro contenitore, ecc.) e accedi al Selettore colori
- Passa il mouse su uno qualsiasi dei colori per visualizzare il codice colore
Testare i contrasti di colore:
Esistono numerosi siti e plug-in per il browser come Contrast Checker che verifica il contrasto del colore confrontando i colori degli elementi in primo piano e di sfondo (utilizzando i codici dei colori). Per controllare il contrasto del colore per il testo su un'immagine di sfondo, ti consigliamo di utilizzare Colour Contrast Analyzer che ti permette di scegliere il colore dello sfondo e poi di provarlo.
Regolare il contrasto del colore
Puoi utilizzare il Wizard accessibilità nel tuo Editor per trovare e regolare qualsiasi contrasto di colore basso su un sito, indipendentemente dal fatto che tu stia utilizzando l'Editor Wix o l'Editor Studio. Il Wizard scansiona il tuo sito alla ricerca di potenziali problemi di accessibilità ed evidenzia i modi per migliorare l'accessibilità del sito.
Con la maggior parte degli elementi, puoi apportare modifiche all'interno del Wizard stesso. Tuttavia, alcuni elementi (es. elementi dell'app) al momento non sono completamente integrati con il Wizard e devono essere modificati manualmente.
Editor Wix
Editor Studio
- Vai al tuo Editor
- Clicca su Impostazioni nella parte superiore dell'Editor
- Seleziona Wizard accessibilità
- Seleziona Scansiona sito
- Clicca sulla scheda Problemi rilevati
- Seleziona una pagina dall'elenco
- Clicca su Migliora il contrasto dei colori
- Seleziona l'elemento pertinente e modificalo in base alle tue esigenze:
Regola il contrasto nel Wizard
Regola manualmente il contrasto
Stai visualizzando grafici o dati sul tuo sito?
Il colore ad alto contrasto è un ottimo modo per visualizzare i dati sul tuo sito. Tuttavia, ti consigliamo di utilizzare anche altri indicatori (come aspetto e pattern) per differenziare le informazioni.
Prossimo passo:
Torna alla Checklist per l'accessibilità per continuare a migliorare l'accessibilità del tuo sito.