Convertitore di Colori - HEX, RGB, HSL e Contrasto WCAG
Convertitore di colori e verifica del contrasto
HEX, rgb(), hsl() o un nome colore CSS: tutti e quattro vengono letti.
Tonalità
La stessa tinta in undici livelli di luminosità. Clicca per renderla il colore corrente.
Contrasto
Il rapporto tra due colori, misurato come lo definisce WCAG.
| Coppia | Rapporto | Livelli |
|---|
Soglie: testo normale 4,5 (AA) e 7 (AAA); testo da 18pt o 14pt grassetto 3 e 4,5; elementi di interfaccia e grafica 3.
Colore conforme più vicino
Cambia solo la luminosità: tinta e saturazione restano, quindi il colore resta riconoscibilmente il tuo.
Anteprima
Un rapporto è un numero, non un verdetto: un colore può superare 4,5 ed essere ancora difficile da leggere in un carattere sottile.
Testo di titolo grande
Testo normale, nella dimensione che la maggior parte delle pagine usa davvero per i paragrafi.
Pulsante o controlloCosa fa questo strumento
Convertire un colore tra notazioni sono cinque righe di aritmetica. La domanda più difficile è se un testo di quel colore si legga davvero, e quella risposta richiede un passaggio che molti strumenti saltano. Qui ci sono entrambe, sullo stesso colore che hai scritto.
Come si usa
- 1 Scrivi un colore in qualsiasi notazione, oppure usa il selettore.
- 2 Copia la notazione che ti serve, oppure clicca una tonalità per spostarti su di essa.
- 3 Leggi la tabella del contrasto. Tutto ciò che è segnato come non superato sarà difficile da leggere per qualcuno.
Perché la stessa tinta appare diversa in HSL
HSL arrotonda a gradi e percentuali interi, quindi convertire in HSL e tornare indietro non restituisce sempre i byte di partenza. Per questo l’HEX mostrato qui deriva sempre da ciò che hai inserito, mai da un andata e ritorno via HSL: altrimenti il campo slitterebbe di un passo a ogni clic.
Cosa significano i numeri del contrasto
Il rapporto va da 1:1 per due colori identici a 21:1 per nero puro su bianco puro. Le soglie qui sotto sono quelle che lo strumento verifica.
| 4.5:1 | Testo normale, WCAG AA |
| 3:1 | Testo grande o in grassetto, WCAG AA |
| 7:1 | Testo normale, WCAG AAA |
| 21:1 | Il rapporto massimo possibile: nero su bianco |
Il passaggio che molti strumenti saltano
La luminanza relativa non è la media dei valori di canale. Ogni canale va prima linearizzato, perché i numeri di un codice HEX sono codificati in gamma e non proporzionali alla luce. Saltando quel passaggio il rapporto esce comunque come un numero plausibile, solo sbagliato, e l’errore è massimo nei mezzitoni, dove vivono quasi tutti i colori di interfaccia.
Il contrasto è necessario, non sufficiente
Una coppia può superare 4,5:1 ed essere comunque una scelta infelice: il daltonismo rende alcune coppie indistinguibili anche a rapporti alti, e il colore non dovrebbe mai essere l’unica cosa che porta significato. Considera un «supera» qui come una soglia raggiunta, non come un giudizio sul design.