header-logo
Scopri come creare il sito per la tua attività con Wix.
Progetta il tuo sito con le funzionalità intuitive di Wix.
Gestisci abbonamenti, pacchetti e fatture.
Gestisci la tua attività e comunica con i tuoi membri.
Acquista, trasferisci e collega un dominio al tuo sito.
Fai crescere la tua attività online con gli strumenti giusti.
Aumenta la visibilità del tuo sito con il marketing e la SEO.
Lavora in modo efficace con le funzionalità più avanzate.
Scopri i problemi noti, trova soluzioni o contattaci.
placeholder-preview-image
Diventa un esperto con i nostri corsi e tutorial.
Scopri i consigli per web design, marketing e molto altro.
Scopri come far crescere il traffico organico del tuo sito.
Crea il tuo sito con la nostra piattaforma full stack.
Trova un esperto che ti aiuti a raggiungere i tuoi obiettivi.
placeholder-preview-image

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
  1. Seleziona l'elemento pertinente (testo, sfondo della striscia, riquadro contenitore, ecc.) e accedi al Selettore colori
  2. Passa il mouse su uno qualsiasi dei colori per visualizzare il codice colore
Il selettore colori nell'Editor Wix. Il cursore si trova su un colore e il codice è evidenziato sul pannello
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
  1. Vai al tuo Editor
  2. Clicca su Impostazioni nella parte superiore dell'Editor
  3. Seleziona Wizard accessibilità
  4. Seleziona Scansiona sito
  5. Clicca sulla scheda Problemi rilevati
  6. Seleziona una pagina dall'elenco
  7. Clicca su Migliora il contrasto dei colori
  8. Seleziona l'elemento pertinente e modificalo in base alle tue esigenze:
Il pannello del contrasto di colore è aperto nel Wizard. Il contrasto è stato regolato e il mouse si trova su Applica
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.