Verifica contrasto colori (WCAG)
Scegli il colore del testo e quello dello sfondo: vedi subito il rapporto di contrasto e se rispetta i livelli WCAG.
Testo grande di esempio
Testo normale di esempio: così lo leggeranno i tuoi visitatori.
—Rapporto
—AA testo normale (4,5)
—AA testo grande (3)
—AAA testo normale (7)
—AAA testo grande (4,5)
Un testo grigio chiaro su sfondo bianco può sembrare elegante ma diventa faticoso da leggere, soprattutto da smartphone e alla luce del sole. Lo strumento calcola il rapporto di contrasto tra testo e sfondo e ti dice se rispetta le linee guida per l’accessibilità WCAG.
I livelli da rispettare
- AA, testo normale: rapporto di almeno 4,5:1. È il livello di riferimento per la maggior parte dei siti.
- AA, testo grande (dal 18 pt, o 14 pt in grassetto): almeno 3:1.
- AAA: almeno 7:1 per il testo normale e 4,5:1 per quello grande.
Contrasto e design system
Conviene verificare il contrasto una volta per tutte sulle coppie di colori del design system, come testo principale, testo secondario, pulsanti e link, invece che pagina per pagina. Così ogni nuova pagina nasce già leggibile.
