DESIGN

Rapporti di Contrasto WCAG: Come Verificare che i Tuoi Colori Passino AA

Il contrasto dei colori non è solo una questione estetica — è un requisito legale in molti Paesi e un imperativo morale. Milioni di persone con ipovisione o daltonismo non riescono a leggere testo con contrasto insufficiente. Le linee guida WCAG definiscono standard misurabili che ogni prodotto digitale dovrebbe rispettare.

Livelli WCAG e Requisiti

  • WCAG AA (livello standard): Rapporto di contrasto di almeno 4,5:1 per testo normale, 3:1 per testo grande (18pt o 14pt grassetto). Requisito minimo per la conformità legale in molti Paesi.
  • WCAG AAA (livello avanzato): 7:1 per testo normale, 4,5:1 per testo grande. Raccomandato per siti di servizi pubblici e accessibilità massima.
  • UI Components (WCAG 2.1): 3:1 per icone, bordi di input e altri elementi non-testuali.

Come Usare il Verificatore

  1. Inserisci il colore del testo e il colore di sfondo in qualsiasi formato (HEX, RGB, HSL).
  2. Il verificatore calcola il rapporto di contrasto e mostra se supera AA e AAA.
  3. Usa il suggeritore di colori per trovare varianti che rispettano gli standard mantenendo l'estetica del brand.