Accessibilità: preparare il testo e la grafica
In questo articolo:
- I nostri consigli
- Trovare i codici colore
- Regolare il contrasto del colore
- Revisione manuale del 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 placeholder, 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 Wix, Editor Studio o Editor Harmony).
Editor Wix
Editor Studio
Editor Wix Harmony
- 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à nell'Editor per trovare e regolare qualsiasi contrasto di colore basso su un sito, indipendentemente dal site builder che stai utilizzando. 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) non sono attualmente completamente integrate con il Wizard e devono essere controllati o modificati manualmente.
Editor Wix
Editor Studio
Editor Wix Harmony
- 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
Revisione manuale del contrasto del colore
Potrebbe esserci un contrasto di colore sul sito che il Wizard accessibilità non identifica. Ti consigliamo di controllare manualmente il contenuto del sito con il
Controllo del contrasto Wix e di regolare il contrasto in base alle tue esigenze.
Puoi installare e utilizzare il Controllo del contrasto dal tuo site builder (Editor Wix o Editor Studio). Se gli elementi non soddisfano i requisiti, puoi anche testare i nuovi rapporti con il selettore.
Editor Wix
Editor Studio
Per controllare il contrasto:
- (Solo la prima volta) Installa il componente aggiuntivo sull'Editor
- Clicca su Strumenti
in alto a destra dell'Editor - Clicca su Extra dell'Editor
- Clicca su Controllo del contrasto
- Usa le caselle dei colori per selezionare il colore dell'elemento e dello sfondo nel Controllo del contrasto, o incolla i codici colore pertinenti
Per regolare il contrasto:
- Regola i colori di primo piano e di sfondo nella verifica del contrasto in base al rapporto consigliato
- Copia i codici dei colori dall'angolo in basso a destra del selettore
- Seleziona il rispettivo elemento nell'Editor
- Apri il selettore colori dalle impostazioni di design dell'elemento
- Clicca su Aggiungi accanto a I miei colori
- Incolla il codice copiato nel campo
Suggerimento:
Il modo in cui apri le impostazioni di design dipende dall'elemento, ma di solito puoi trovarle selezionando l'elemento e cliccando sull'icona
Design
.
.
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.