Colore di testo accessibile

Questo suggeritore di colore di testo accessibile riceve un colore esadecimale di sfondo, un esadecimale di testo iniziale e un rapporto di contrasto WCAG obiettivo, poi restituisce un colore di testo suggerito che raggiunge quel rapporto spostando soltanto la luminosità HSL. Tonalità e saturazione restano fisse, così un blu di marca resta blu mentre si scurisce o si schiarisce abbastanza da superare AA o AAA sulla superficie indicata. Se il colore di partenza raggiunge già l’obiettivo, viene restituito invariato e contrassegnato come non regolato. Designer, autori di token di design e lavori di CI lo usano quando un verificatore di contrasto non basta: serve un esadecimale sostitutivo deterministico, non soltanto un segnale di superato o fallito. Non vi sono chiamate di rete, semi casuali né letture di orologio.

Come una ricerca di luminosità raggiunge un obiettivo di contrasto WCAG

Il contrasto sul web non è una questione di gusto. Le Linee guida per l’accessibilità dei contenuti Web definiscono un solo rapporto di contrasto dalla luminanza relativa, perché il corpo del testo, i pulsanti e le etichette restino leggibili per chi ha una visione ridotta. Questo suggeritore parte dal Suo esadecimale di sfondo e da un esadecimale di testo iniziale, poi cambia solo la luminosità di quel colore di testo in HSL finché il rapporto WCAG 2.x rispetto allo sfondo non raggiunge l’obiettivo che Lei ha chiesto.

Tonalità e saturazione restano ferme, così un blu navy di marca resta navy e un rosso di marca resta rosso; varia soltanto quanto è chiara o scura l’inchiostro. Il motore linearizza ciascun canale sRGB con la curva ufficiale a tratti, costruisce la luminanza con i pesi 0.2126, 0.7152 e 0.0722 e calcola la luminanza più chiara più 0.05 divisa per la più scura più 0.05.

Percorre poi la luminosità HSL in decimi di percentuale deterministici verso il nero e verso il bianco, riconverte ogni passo in RGB a 8 bit e conserva il primo esadecimale quantizzato in ciascuna direzione che soddisfa l’obiettivo non arrotondato. Vince il candidato con il minor cambiamento di luminosità; un pareggio preferisce scurire, la correzione abituale per un carattere grigio su una scheda chiara. Se il colore di partenza raggiunge già l’obiettivo, viene restituito invariato così i token non vengono riscritti senza motivo.

Non c’è jitter casuale, consultazione di rete né scorciatoia legata alla data: le stesse tre entrate producono sempre lo stesso esadecimale suggerito e le stesse bandiere di convalida.

Dove un suggeritore di colore di testo accessibile merita il proprio spazio

I team di prodotto arrivano a questa pagina quando un grigio di marca appare elegante su una diapositiva di marketing ma fallisce come corpo di testo su una scheda bianca, quando un tema in modalità scura è generato da token chiari, oppure quando le parti legali chiedono un esadecimale sostitutivo invece di un parere da cattura schermo. I designer incollano una superficie e un inchiostro iniziale da Figma o da un file di token e riportano l’esadecimale suggerito nella palette, invece di spingere a occhio un cursore di luminosità.

Gli specialisti di QA e accessibilità allegano il rapporto originale, il rapporto suggerito e l’esadecimale suggerito ai ticket, così gli sviluppatori correggono la coppia esatta. I team di contenuto e marketing verificano che i colori di campagna abbiano ancora un compagno di testo lecito quando sono posati su sfondi chiari o scuri del sito. Se Lei deve soltanto misurare una coppia già scelta, usi una pagina di verificatore di contrasto; questa pagina possiede l’intento di suggerire un colore di testo che superi.