Convertitore di colori e verificatore di contrasto

Che cosa fa questo strumento

Due compiti che si rivelano sempre uno solo. Hai un colore e ti serve in un’altra notazione: il file di design dice una cosa, il foglio di stile ne vuole un’altra. E hai due colori e devi sapere se il testo del primo si legge sul secondo. Per questo la pagina prende due colori, mostra ciascuno in tutti i formati insieme e misura il contrasto fra loro.

Tutto gira nel tuo browser. Nulla di una palette di marca non ancora pubblicata ha bisogno di viaggiare fino a un server per essere convertito.

Le cinque notazioni

Ognuna può essere incollata, e tutte tornano indietro:

• Esadecimale — tre, quattro, sei o otto cifre. Le forme brevi raddoppiano ogni cifra, quindi #f0a significa #ff00aa. Quattro e otto cifre portano l’alfa nell’ultima posizione.
• RGB — i tre canali come numeri o percentuali. Sono accettati sia rgb(59, 130, 246) sia rgb(59 130 246 / 50%); la forma con le virgole è quella che questo strumento riscrive, perché è ancora quella usata dalla maggior parte del codice attorno a te.
• HSL — tonalità in gradi, poi saturazione e luminosità in percentuale. Le tonalità si avvolgono, quindi 480 e -120 sono validi e valgono 120 e 240.
• OKLCH — luminosità, croma e tonalità in uno spazio percettivamente uniforme. La luminosità si può scrivere 62.8% oppure 0.628.
• Nomi CSS — tutti e 148, compreso rebeccapurple e le due grafie di ogni grigio. Un nome compare in uscita solo quando la corrispondenza è esatta.

Una stranezza da conoscere: esadecimale, RGB e OKLCH sopravvivono intatti a un’andata e ritorno, ma HSL non del tutto. Viene stampato con la precisione che le persone leggono davvero — gradi interi, un decimale di percentuale — e non basta a indirizzare tutti i 16,7 milioni di colori sRGB. Converti un esadecimale in HSL e ritorno e un canale può spostarsi di uno. L’alternativa sarebbe un’uscita come hsl(217.22, 91.19%, 59.8%), che nessuno vuole incollare. L’errore resta ben al di sotto di ciò che l’occhio vede.

Perché esiste OKLCH

HSL sembra descrivere la luminosità, e non lo fa. Il suo numero di luminosità è una proprietà dei numeri, non della luce. Il giallo puro e il blu puro hanno entrambi il 50% di luminosità in HSL:

giallo   #ffff00   hsl 50%   oklch 96.8%
blu      #0000ff   hsl 50%   oklch 45.2%

Chiunque vede che il giallo è il più chiaro dei due, e OKLCH lo dice. Non è una questione accademica: è il motivo per cui una palette costruita tenendo costante la luminosità HSL e ruotando la tonalità produce un insieme di colori dall’aspetto assolutamente irregolare, e per cui lo stesso espediente in OKLCH produce un insieme che sembra una famiglia. È anche il motivo per cui, in OKLCH, due colori con la stessa luminosità hanno di solito un contrasto simile sullo stesso sfondo, cosa che HSL non può promettere affatto.

Gli altri due numeri sono il croma — in soldoni, quanto è colorato, da 0 per il grigio — e la tonalità in gradi. A differenza della saturazione di HSL, il croma non è una percentuale di nulla, ed è per questo che il valore massimo utilizzabile dipende sia dalla luminosità sia dalla tonalità.

Quando un colore non si può mostrare

OKLCH può descrivere più colori di quanti uno schermo comune riesca a produrre. Chiedi una luminosità del 70% con un croma di 0.4 e hai nominato un verde che esiste in linea di principio e da nessuna parte in sRGB. Lo strumento riporta quel colore nell’intervallo e lo segnala come fuori da sRGB, invece di restituirti in silenzio qualcosa d’altro.

L’avviso compare solo quando il riporto cambia davvero il colore che ottieni. Questa distinzione conta più di quanto sembri. Il rosso sRGB sta esattamente sul bordo del gamut, quindi un valore OKLCH pubblicato per esso, arrotondato a quattro decimali, cade tecnicamente di un capello all’esterno — circa due parti su diecimila, che ricadono sullo stesso byte e sono invisibili. Avvisare di questo ti insegnerebbe a ignorare l’avviso. Un colore da una palette a gamut ampio sbaglia di passi interi: il blue-500 di Tailwind v4 chiede 261 su 255 possibili nel canale blu, e su uno schermo sRGB non è davvero il colore richiesto.

Il contrasto e le sue tre soglie

Il rapporto di contrasto confronta la luminanza relativa di due colori. Va da 1:1 per due colori identici a 21:1 per il nero su bianco, e nulla può superarlo. WCAG 2.1 fissa tre soglie, e non sono intercambiabili:

• 4.5:1 per il testo corrente — tutto ciò che sta sotto i 18pt, o sotto i 14pt in grassetto. È quella a cui si pensa quando si dice che un colore «non passa il contrasto».
• 3:1 per il testo grande — da 18pt in su, o da 14pt in grassetto in su. Le lettere più grandi portano da sé una parte maggiore del segnale, quindi l’asticella è più bassa.
• 3:1 per controlli e grafica — il bordo di un campo, la freccia di un menu a discesa, le barre di un grafico. Aggiunta in WCAG 2.1 e ampiamente ignorata, perché si controlla il proprio testo e mai la casella che lo circonda.

Il livello AAA alza i primi due a 7:1 e 4.5:1. Vale la pena puntarci per il testo corrente ed è davvero difficile da raggiungere con una palette di marca; AA è ciò che chiedono normative e verifiche.

Le dimensioni in quelle regole sono punti CSS, non pixel: 18pt sono 24px e 14pt circa 18,7px con le impostazioni predefinite. È facile dare per scontato che un titolo da 20px conti come testo grande. Non conta.

Colori traslucidi

Un testo semitrasparente su uno sfondo pieno ha un rapporto di contrasto perfettamente definito: il browser mescola i due colori prima di disegnare, e così fa questo strumento. Un testo grigio al 60% di opacità è semplicemente un grigio più chiaro una volta posato, e viene misurato per ciò che diventa. Gli strumenti che ignorano il canale alfa riportano il rapporto del colore che hai scritto e non di quello che chiunque vede, il che lo sovrastima sempre: un verificatore di accessibilità che sbaglia a tuo favore è peggio di nessun verificatore.

Uno sfondo traslucido è un’altra faccenda, e lo strumento la rifiuta. Ciò che si vede attraverso dipende da cosa c’è sotto, e non è una domanda a cui i due colori di questa pagina possano rispondere. Risolvi lo sfondo nel colore in cui si compone davvero e misura quello.

Ciò che il rapporto non dice

Un rapporto che passa è un pavimento, non un verdetto. Tre cose che non copre:

• Il daltonismo. Un rosso e un verde di luminanza identica hanno un rapporto vicino a 1:1 e sono indistinguibili per chiunque — ma due colori possono passare il rapporto ed essere comunque l’unica cosa che separa due stati, il che fallisce per chi non li distingue. Non affidare mai il significato alla sola tonalità.
• I caratteri sottili. La formula non sa nulla dello spessore del tratto. Un peso capillare a 4.5:1 può risultare più faticoso di un peso normale a 4:1.
• La formula stessa. È noto che il contrasto di WCAG 2 sia poco generoso con il testo chiaro su fondo scuro, e riporti rapporti che sembrano più alti di come si leggono. APCA, redatto per WCAG 3, modella meglio la cosa — ma non è normativo, nessuna verifica lo accetta ancora, e mostrare due punteggi in contraddizione non aiuterebbe nessuno. Per questo se ne parla qui e non viene stampato sopra.

Una nota di implementazione per chi confronta i risultati con il proprio codice: la formula della luminanza usa una soglia di 0.03928, lievemente diversa dallo 0.04045 dell’attuale definizione di sRGB. WCAG cita il valore più vecchio, quindi è quello usato qui. Aderire alla specifica conta più della coerenza interna, e la differenza non trasforma mai un superato in un non superato.