Sito in aggiornamento

Il sito è in fase di aggiornamento dopo la sostituzione del sito vecchio.

Menù e Contrasto colore

Per calcolarlo esistono vari strumenti come il Contrast Checker di WebAIM. Niente di complicato: basta selezionare 2 colori e il gioco è fatto.

 Slide 1: Menu e contrasto colore

Cosa trovi in questa pagina:

  1. Cos’è il contrasto colore?
  2. Il contrasto migliora la leggibilità
  3. Lettura VS Scansione
  4. Testi sopra immagini
  5. Di chi è la colpa?
  6. Il caso del menu
  7. Allora cosa è meglio fare?
  8. Con background
  9. Senza background
  • Cos’è il contrasto colore?

    Le linee guida per l’accessibilità WCAG 2.1 AA consigliano 2 livelli minimi di contrasto colore per i testi:

    • 1:3 per i testi più grandi (24px) o bold (da 18px)
    • 1:4.5 per i testi più piccoli

    Per calcolarlo esistono vari strumenti come il Contrast Checker di WebAIM. Niente di complicato: basta selezionare 2 colori e il gioco è fatto.

  • Il contrasto migliora la leggibilità

    Ci aiuta se facciamo fatica a leggere e in generale ci aiuta a vedere meglio in situazioni comuni come: alla luce del sole e al telefono.

  • Lettura VS Scansione

    Ricordiamoci anche che sui siti non si legge tutto. Le persone scansionano le pagine per trovare quello che serve. Quindi è meglio favorire questa azione con una buona leggibilità.

  • Testi sopra immagini

    I testi sopra le immagini possono essere critici dal punto di vista dell’accessibilità. I problemi cominciano soprattutto quando consegni un progetto web e il cliente inizia a cambiare le immagini in autonomia. Poi cerchi di spiegarlo e dall’altra parte ci sono solo tanti dubbi: “Photoshop? Tool online? Contrast checker? Non capiso mia seto”

     Slide 5: I testi sopra le immagini possono essere non leggibili
  • Di chi è la colpa?

    Nel lavoro di squadra non ci sono colpe da dare. In ogni caso l’errore non è sicuramente del cliente. L’errore è di progettazione. Sono dell’idea che anche le persone senza particolari conoscenze tecniche dovrebbero riuscire a gestire un sito in autonomia. L’accessibilità è anche questo.

    È un peccato investire molte ore nel design per poi vedere che il risultato non era quello desiderato. Meglio mettere dei limiti ma garantire autonomia.

     Slide 6: Non è colpa del cliente. È colpa tua
  • Il caso del menu

    Il nav menu è uno degli elementi in cui capita di vedere i testi in sovrapposizione a un’immagine. Vuoi perché preferiamo il minimalismo e vuoi perché vogliamo mettere in risalto una bella foto.

  • Allora cosa è meglio fare?

    Propongo 2 soluzioni:

  • 1. Con background

    La soluzione più facile e SEMPRE valida è di aggiungere un background tra il testo e l’immagine. Così abbiamo più vantaggi:

    • aiutiamo il cliente ad avere maggiore autonomia nella gestione del sito;
    • manteniamo alta l’accessibilità, senza il rischio di errori;
    • e possiamo mettere da parte le linee guida che abbiamo già seguito.
     Slide 9: Il background è la soluzione più facile
  • 2. Senza background

    Il cliente non vuole gestire il sito? Allora andiamo avanti per la nostra strada, senza lo sfondo e con l’accortezza di usare immagini con un buon contrasto.

     Slide 10: Il tuo cliente ti ha affidato la gestione del sito?
  •  Slide 11: Ti serve aiuto?
  •  Slide 12: Collage digitale