Controllo contrasto colore WCAG

Il Success Criterion 1.4.3 di WCAG 2.1 (Contrast Minimum) richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il large text al Level AA. Il Level AAA (1.4.6 Contrast Enhanced) alza quei pavimenti a 7:1 per il testo normale e 4.5:1 per il large text. I rapporti si calcolano dalla luminanza relativa di ciascun colore e vanno da 1:1 (colori identici) a 21:1 (nero puro su bianco puro).

AA è il target di conformità più comune per siti pubblici, servizi governativi e prodotti commerciali — bilancia leggibilità e flessibilità di design. AAA è un livello enhanced più stretto usato quando serve massima leggibilità (ad esempio esperienze di lettura long-form o audience con low vision significativa). Raggiungere AAA su ogni elemento UI è spesso impratico, quindi molti team mirano ad AA globalmente e AAA per il body text critico.

Il large text è definito come almeno 18 point (tipicamente ~24px) di peso regular, o almeno 14 point (tipicamente ~18.66px) bold. Heading e copy hero spesso qualificano; i paragrafi body di solito no. Il large text ha una soglia di contrasto più bassa perché i glifi più grandi restano leggibili a contrasto più debole — ma dovresti comunque verificare la dimensione renderizzata reale nel CSS, non solo nel file di design.

Il basso contrasto è uno dei fallimenti di accessibilità più comuni. Utenti con low vision, adulti più anziani, persone su schermi dim o lavati dal sole, e molti con carenze di visione del colore si affidano tutti a una differenza di luminanza sufficiente — non solo alla tinta — per leggere il testo. Controllare il contrasto presto evita di spedire interfacce che sembrano raffinate in condizioni ideali ma diventano inutilizzabili per una grande fetta di visitatori reali.