Perché il contrasto è fondamentale

Circa 300 milioni di persone nel mondo hanno qualche forma di deficit nella percezione dei colori. Progettare con un buon contrasto non è solo estetica — in molte regioni è un obbligo legale. Lo standard di riferimento è WCAG 2.1:

  • Livello AA: rapporto di contrasto di 4,5:1 per testo normale e 3:1 per testo grande.
  • Livello AAA: 7:1 per testo normale.

Errori comuni

I più frequenti sono: grigio chiaro su bianco (spesso solo 1,5:1), pulsanti colorati con testo bianco che sembrano leggibili ma non superano l'AA, e colori che passano in modalità chiara ma falliscono in modalità scura.

Flusso di lavoro pratico

  1. Cattura il colore di sfondo. Apri Color Picker Camera: HEX RGB, punta la fotocamera sulla superficie e tocca per ottenere il valore HEX immediatamente. L'app mostra anche l'HSL.
  2. Cattura il colore del testo nello stesso modo.
  3. Verifica la coppia in uno strumento di contrasto come WebAIM Contrast Checker, il pannello Accessibilità nei DevTools o il plugin Contrast in Figma.
  4. Regola la luminosità in HSL fino a superare la soglia. Mantieni H e S, abbassa L per scurire il colore senza cambiarne l'identità.

Perché HSL è ideale per il contrasto

RGB e HEX non offrono un controllo intuitivo sulla luminosità. HSL separa tinta, saturazione e luminosità. Color Picker Camera: HEX RGB mostra HEX, RGB, HSL e CMYK contemporaneamente — senza conversioni manuali.

Esempio pratico

Un pulsante blu medio (#4A90E2) con testo bianco ha un contrasto di circa 3,1:1 — insufficiente per l'AA. Un blu navy scuro (#1A3A6B) raggiunge 9,4:1, superando persino l'AAA.

Nota su WCAG 3.0 e APCA

La prossima versione delle linee guida introduce APCA, un modello di contrasto percettivo più raffinato. WCAG 2.1 AA rimane lo standard vigente oggi, ma vale la pena testare contro APCA per progetti a lungo termine.

Scarica Color Picker Camera: HEX RGB gratis per iOS o Android: senza pubblicità, senza tracciamento e funziona completamente offline.