Sito in aggiornamento

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

Creare palette colore accessibili con Contrast grid

Vuoi creare una palette colore accessibile per il tuo Design System?
Usa un Contrast grid. Potrai trovare le migliori combinazioni di colore per rendere accessibile il tuo prodotto digitale.

Slide 1: Palette colori con Contrast Grid

Cosa trovi in questa pagina:

  1. Contrast grid
  2. Contrast Grid Eightshapes
  3. Come usarlo?
  4. Livello AAA (7+)
  5. Livello AA (4.5+)
  6. Livello AA18 (3+)
  7. DNP: Does not pass / Non passa
  8. Altri strumenti utili
  9. Sono Nicola Mascotto

  • Contrast grid

    Vuoi creare una palette colore accessibile per il tuo Design System?
    Usa un Contrast grid. Potrai trovare le migliori combinazioni di colore per rendere accessibile il tuo prodotto digitale.

    Slide 2: Contrast Grid

  • Contrast Grid Eightshapes

    Questo tool sviluppato da EightShapes, LLC è tra i migliori che ho trovato. Ti aiuta a vedere 4 livelli delle WCAG 2.2 in poco tempo.

    • AAA: valido 7+
    • AA: valido 4.5+
    • AA18: valido 3+, solo per testi grandi
    • DNP: does not pass / non valido

    Con i colori Flying Chair compare così: https://shorturl.at/blnB8

    Slide 3: Contrast Grid Eightshapes

  • Come usarlo? Basta incollare i colori

    Inserisci un colore per riga nel tuo ordine preferito e vedrai i 4 livelli.

    Slide 4: Incolla i tuoi colori

  • Livello AAA (7+)

    Queste combinazioni hanno contrasto colore maggiore di 7 e quindi rispettano il livello AAA delle WCAG.

    Slide 5: Livello AAA (7+)

  • Livello AA (4.5+)

    Contrasto colore tra 4.5 e 7, rispettano il livello AA delle WCAG.

    Slide 6: Livello AA18 (3+)

  • Livello AA18 (3+)

    Contrasto colore tra 3 e 4.5. Utilizzabile solo per testo grande (18px) e per titoli.

    Slide 7: Livello AA (4.5+)

  • DNP: Does not pass / Non passa

    Queste combinazioni non sono valide per l’accessibilità.

    Slide 8: DNP: Does not pass / Non passa

  • Altri strumenti utili

    • Accessible color palette builder: un altro tool per creare palette contrasto colore.
    • Contrast Grid per Figma: lo stesso tool visto in queste slide convertito per Figma.
    Slide 9: Altri strumenti

  • Sono Nicola Mascotto

    Parlo di accessibilità digitale e WordPress. Ogni martedì su LinkedIn pubblico un post sull’accessibilità dei siti web. L’hashtag è #MartedìAccessibile.

    Slide 10: Ti serve aiuto?
Collaboriamo? Contattaci