Comprendere sRGB nel Calcolo del Contrasto

1. Cos'è sRGB?

sRGB (Standard Red Green Blue) è lo spazio colore predefinito per il web, definito dallo standard internazionale IEC 61966-2-1. Creato nel 1996 da HP e Microsoft, sRGB è stato progettato per fornire un'esperienza cromatica coerente su monitor, stampanti e fotocamere digitali. WCAG 2.2 prescrive sRGB come spazio colore di riferimento per il calcolo della luminanza relativa e dei rapporti di contrasto. Ciò significa che ogni calcolo di contrasto deve utilizzare la funzione di trasferimento sRGB per produrre risultati comparabili. La scelta di sRGB garantisce che le misurazioni di accessibilità siano coerenti indipendentemente dallo strumento utilizzato.

2. La Funzione di Trasferimento sRGB

Gli schermi non emettono luce proporzionalmente ai valori di colore memorizzati. Un valore pixel di 128 (su 255) non produce metà della luce di un pixel a 255. Questa relazione non lineare si chiama codifica gamma, e la funzione di trasferimento sRGB è la curva specifica che la inverte. Per calcolare il contrasto con precisione, ogni canale di colore (R, G, B) deve prima essere linearizzato. La specifica sRGB definisce una funzione a tratti: valori pari o inferiori a 0,04045 vengono divisi per 12,92, mentre valori più alti usano la formula ((valore + 0,055) / 1,055) elevata alla potenza 2,4. Questo passaggio di linearizzazione è critico. Senza di esso, i colori medi produrrebbero valori di luminanza significativamente errati.

3. sRGB vs Altri Spazi Colore

I display moderni supportano sempre più spazi colore più ampi come Display P3 (dispositivi Apple) e Adobe RGB (fotografia professionale). Questi spazi possono rappresentare colori più vividi di sRGB. Tuttavia, i calcoli di contrasto WCAG usano sempre sRGB, anche quando il display supporta un gamut più ampio. I colori specificati in CSS usando P3 o altri spazi vengono mappati ai loro equivalenti sRGB per la misurazione del contrasto. Questa è una scelta deliberata: sRGB fornisce una baseline universale. In pratica, una coppia di colori che supera il contrasto WCAG in sRGB sarà leggibile anche su display a gamut più ampio. Se progetta in Display P3 o Adobe RGB, verifichi sempre i Suoi rapporti di contrasto con la formula WCAG basata su sRGB.

4. Implicazioni Pratiche per i Designer

Comprendere sRGB è importante per il lavoro di design quotidiano. Primo, specifica sempre i colori in valori esadecimali sRGB (#RRGGBB) per progetti web — questo è ciò che i browser renderizzano per default e ciò che gli strumenti di accessibilità valutano. Secondo, tieni presente che i valori colore da strumenti come Figma o Sketch possono usare profili colore diversi. Quando esporti per il web, assicurati di lavorare nel profilo sRGB. Terzo, la curva gamma sRGB significa che i cambiamenti di contrasto non sono lineari. Piccoli aggiustamenti su colori molto scuri o molto chiari hanno un effetto maggiore sul rapporto rispetto allo stesso aggiustamento su colori medi. Lavora con il verificatore di contrasto aperto per vedere i cambiamenti in tempo reale.

Prova questo esempio →