Testo che si illumina allo scroll: come non rompere il contrasto

Nella sezione «profilo» di questo sito un paragrafo grande si accende parola per parola mentre scorri: le parole non ancora lette sono attenuate, quelle già lette tornano al colore pieno. È un effetto di lettura progressiva molto comune. Ha un problema che si vede solo misurando.

Il problema

Le parole partivano dal 16% di opacità. Su sfondo scuro (#09090a) il testo risultava circa #2e2e2f, con un rapporto di contrasto di 1,46:1. Lighthouse lo ha segnalato come errore di contrasto, e a ragione: finché non si accendono, quelle parole sono quasi illeggibili.

Cosa chiede WCAG

• Testo normale: almeno 4,5:1.
• Testo grande (da 24 px, oppure da 18,66 px in grassetto): almeno 3:1.
• Il paragrafo è a circa 20,8 px in peso normale, quindi conta come testo normale: serve 4,5:1.

Come ho scelto il valore

Alzando l’opacità minima al 36% il contrasto misurato saliva a 3,01:1: meglio, ma ancora sotto soglia per quella dimensione. Con il 50% il testo spento è circa #7e7e7c su #09090a, intorno a 4,9:1, e l’audit di contrasto di Lighthouse non segnala più errori (nei test in locale l’accessibilità del sito è passata da 96 a 98).

L’effetto resta riconoscibile: le parole passano da un grigio medio al bianco pieno, con meno stacco di prima ma senza diventare invisibili.

Regole pratiche

• Fissa un’opacità o un colore minimo per le parti «spente» e verificalo con uno strumento di contrasto, anche sul tema chiaro.
• Un testo attenuato non è decorazione: è comunque contenuto, e va letto anche da chi non ha una vista perfetta o usa lo schermo al sole.
• Con «riduci movimento» mostra il testo già acceso, senza animazione.
• Rifai Lighthouse dopo ogni ritocco: la soglia si misura, non si stima a occhio.