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 | AA (4,5:1) | AAA (7:1) |
|---|
Cosa 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.