Convertitore di colori e verifica del contrasto

Che cos’è questo strumento?

Incolla un colore in qualsiasi formato — #ff6347, rgb(255 99 71), hsl(9 100% 64%) o semplicemente tomato — e copialo in tutti gli altri. Passa alla verifica del contrasto per controllare testo e sfondo secondo WCAG 2 e ottenere il colore conforme più vicino quando una coppia non supera il test.

Gli schermi mescolano luce rossa, verde e blu, quindi HEX e RGB descrivono i colori come li mostrano i monitor. HSL e HSV si regolano più facilmente a mano, CMYK approssima gli inchiostri di stampa e OKLCH è uno spazio percettivo moderno supportato dai CSS.

I rapporti di contrasto WCAG vanno da 1:1 a 21:1. Il testo normale richiede almeno 4,5:1 per AA e 7:1 per AAA; il testo grande (24px, o 18,66px in grassetto) e i componenti dell’interfaccia richiedono 3:1. I colori traslucidi vengono fusi con lo sfondo prima della misura.

Come usare Convertitore di colori e contrasto

1. Scrivi o incolla un colore, oppure sceglilo con il selettore.
2. Copia il formato che ti serve: HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH o il nome CSS.
3. Fai clic su una tinta o sfumatura per esplorare versioni più chiare e più scure della stessa tonalità.
4. Apri la verifica del contrasto, imposta testo e sfondo e scopri se superano WCAG AA e AAA.
5. Se una coppia non passa, usa il colore suggerito: mantiene la tonalità e regola la luminosità.

Esempi

tomato

#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

Domande frequenti