Contrasto e Colori
Garantire una leggibilità ottimale per tutti gli utenti
Criteri WCAG EN 301 549
Contrasto del testo
Esempio negativo
Testo grigio chiaro su bianco (2.2:1) - Non passa
Ratio: 2.2:1Testo grigio medio su bianco (3.8:1) - Non passa
Ratio: 3.8:1Testo giallo su bianco (1.9:1) - Non passa
Ratio: 1.9:1Arancione su rosso (1.2:1) - Non passa
Ratio: 1.2:1Grigio scuro su sfondo nero (2.5:1) - Non passa
Ratio: 2.5:1Blu su sfondo scuro (1.8:1) - Non passa
Ratio: 1.8:1Esempio positivo
Testo grigio scuro su bianco (7.0:1) - Passa AAA
Ratio: 7.0:1Testo nero su bianco (21:1) - Passa AAA
Ratio: 21:1Testo blu scuro su bianco (5.9:1) - Passa AA
Ratio: 5.9:1Bianco su blu scuro (8.6:1) - Passa AAA
Ratio: 8.6:1Bianco su sfondo nero (21:1) - Passa AAA
Ratio: 21:1Giallo su sfondo scuro (12.3:1) - Passa AAA
Ratio: 12.3:1Spiegazione: Il rapporto di contrasto WCAG AA richiede un minimo di 4.5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt+ grassetto). Il livello AAA è più rigoroso con 7:1 e 4.5:1.
Informazioni per colore
Esempio negativo
Modulo di registrazione
🔴 Rosso = Errore, Verde = Valido
Stato ordine
Esempio positivo
Modulo di registrazione
Stato ordine
Spiegazione: Le informazioni non dovrebbero mai basarsi esclusivamente sul colore. Aggiungi sempre indicatori visivi aggiuntivi (icone, pattern, testo).
Daltonismo e accessibilità
Esempio negativo
Grafico delle prestazioni
Esempio positivo
Grafico delle prestazioni
Spiegazione: Circa l'8% degli uomini e lo 0,5% delle donne sono daltonici. Le combinazioni rosso-verde sono particolarmente problematiche.
Cambia tema accessibile
Esempio negativo
Contenuto della pagina
Questo testo cambia colore in base al tema.
Scheda informativa
Informazioni importanti da leggere.
Esempio positivo
Contenuto della pagina
Questo testo mantiene un buon contrasto in tutti i temi.
Scheda informativa
Informazioni importanti sempre leggibili.
Spiegazione: Un cambia tema deve mantenere i rapporti di contrasto, preservare la leggibilità e rispettare le preferenze di sistema dell'utente.
Link - Sottolineatura e identificazione
Esempio negativo
Link basati esclusivamente sul colore
L'accessibilità web è essenziale per creare siti inclusivi. Scopri di più sull'accessibilità può aiutarti a comprendere le best practice. Le linee guida WCAG forniscono un framework completo per migliorare l'accessibilità.
Visita la nostra pagina delle risorse per trovare strumenti e tutorial.
Esempio positivo
Link basati esclusivamente sul colore
L'accessibilità web è essenziale per creare siti inclusivi. Scopri di più sull'accessibilità può aiutarti a comprendere le best practice. Le linee guida WCAG forniscono un framework completo per migliorare l'accessibilità.
Visita la nostra pagina delle risorse per trovare strumenti e tutorial.
Spiegazione: I link devono essere identificabili senza basarsi esclusivamente sul colore. Sottolineatura, differenze di pattern o altri indicatori visivi sono essenziali.