appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/itCome verificare il contrasto del testo di un colore scelto prima di usarlo nell'interfacciaLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Impara a verificare il rapporto di contrasto WCAG e ad adattare i colori in HSL per un'interfaccia sempre accessibile e leggibile.
DesignarticleAppStoryoPerché il contrasto è fondamentaleCirca 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 comuniI 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 praticoCattura 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.
Cattura il colore del testo nello stesso modo.
Verifica la coppia in uno strumento di contrasto come WebAIM Contrast Checker, il pannello Accessibilità nei DevTools o il plugin Contrast in Figma.
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 contrastoRGB 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 praticoUn 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 APCALa 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.