- Utilizzate un contrasto sufficiente tra il testo e lo sfondo per garantire che il testo sia leggibile per tutti gli utenti.
- Evitare colori forti e immagini per lo sfondo dei documenti testuali, presentazioni powerpoint e siti web
- I colori di primo piano e di sfondo devono soddisfare i requisiti WCAG per il contrasto, che varia a seconda delle dimensioni del testo.
(verifica con il WAVE WebAIM Web Accessibility Evaluation Tool) - Evitate di usare il colore da solo per trasmettere un significato, perché il vostro messaggio potrebbe essere perso o frainteso da chi non vede i colori.
- Utilizzate il colore insieme a un elemento secondario (come la forma o le differenze di testo) per garantire che il significato possa essere compreso senza l'uso del solo colore.
Ai fini dell'accessibilità si considera il contrasto di luminanza:
- La WCAG 2.0 livello AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo di dimensione normale e di 3:1 per il testo di grandi dimensioni.
- La WCAG 2.1 richiede un rapporto di contrasto di almeno 3:1 per i componenti grafici e per l'interfaccia utente (come i bordi di input dei moduli).
- La WCAG livello AAA richiede un rapporto di contrasto di almeno 7:1 per il testo normale e 4,5:1 per il testo di grandi dimensioni.
Contrasto: tool e strumenti utili per analizzare il contrasto
Color Contrast Analyser (free)
può essere utilizzato su siti web, durante lo sviluppo di app, nella progettazione di grafica per i social media, diapositive PowerPoint, PDF, file InDesign e quasi tutto!
Caratteristiche:
- Indicatori di conformità alle WCAG 2.1
- Modalità scura
- Diversi modi per selezionare i colori: È possibile inserire manualmente i formati di colore CSS, utilizzare un cursore RGB o scegliere lo strumento di selezione dei colori.
- Simulatore di cecità cromatica (daltonismo)
- Supporto per la trasparenza alfa sui colori in primo piano
WCAG Color contrast checker
WCAG Color contrast checker è uno dei strumenti più completi per la valutazione del contrasto. È un'estensione per il browser che misura il contrasto su tutti gli elementi della pagina in base ai requisiti di accessibilità WCAG. Considera le proprietà CSS color e background-color e analizza anche i valori RGBA.
Può simulare il daltonismo e valutare il contrasto per le simulazioni. In questo modo, gli sviluppatori possono vedere come appaiono le pagine per gli utenti daltonici.
Lo strumento include anche due campi in cui si possono inserire manualmente i colori da testare e di prelevare il colore direttamente dagli elementi della pagina.
Infine, si aggiorna automaticamente quando il DOM della pagina cambia (aggiunta o rimozione di elementi), ma se la pagina subisce molte modifiche, questa funzionalità può essere disattivata.
WeabAIM Contrast Checker
WeabAIM Contrast Checker è uno strumento fruibile direttamente sul web, per calcolare il contrasto tra testo e sfondo. È sufficiente inserire il colore di sfondo e il colore del testo per sapere se e come si stanno rispettando i livelli di contrasto per l'accessibilità.
Colorzilla
Colorzilla è un'estensione da installare sul browser che serve per identificare il colore degli elementi di ogni pagina web.
WAVE
WAVE è anche questa un'estensione che consente di analizzare, tra le altre cose, i rapporti di contrasto per tutti gli elementi di testo della pagina contemporaneamente.
WebAIM Link Contrast Checker
WebAIM Link Contrast Checker è un tool fruibile direttamente sul web, per calcolare il contrasto dei link in relazione con il testo e lo sfondo. È sufficiente inserire il colore del link, del testo e dello sfondo per analizzare il livello di contrasto per l'accessibilità.
