Encoders & Utilities

Convertitore colori e contrasto WCAG

HEX ↔ RGB ↔ HSL con palette e verifica contrasto WCAG.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

Informazioni su questo strumento

Color Converter traduce in modo incrociato i colori tra i formati che designer e sviluppatori utilizzano ogni giorno: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, oltre ai colori CSS con nome (rebeccapurple, tomato, tutti e 147). Si digita qualsiasi formato e gli altri si aggiornano istantaneamente; il canale alfa è preservato attraverso i formati che lo supportano.

Due funzioni extra rendono questo più di un convertitore passivo. Il generatore di palette produce scale tonali (50/100/.../900) e gruppi di armonia (complementare, triadico, tetradico, split-complementare) attorno al colore base — utile per popolare un design system. Il WCAG contrast checker sceglie un foreground e un background, calcola il rapporto di contrasto secondo WCAG 2.2 e indica se la coppia passa AA (4,5:1 testo piccolo, 3:1 testo grande) e AAA (7:1 piccolo, 4,5:1 grande).

Quando usare questo strumento

Costruire un design system. Scegliere un colore brand, ottenere una scala tonale completa per ruoli primary/secondary/neutral.
Audit dell'accessibilità. Passare ogni coppia text/background attraverso il contrast checker; sotto 4,5:1 significa che il criterio di accettazione WCAG AA fallisce.
Migrazione del CSS. Convertire vecchie costanti hex in OKLCH per il workflow moderno wide-gamut.
Handoff designer-sviluppatore. Tradurre valori RGB di Figma in hex CSS (o viceversa) senza errori di arrotondamento.

Sul contrasto WCAG e OKLCH

Il contrasto WCAG 2.2 usa la formula storica della "luminanza relativa" — adeguata per la maggior parte dei casi ma nota per sovrastimare o sottostimare certe coppie di colori. APCA (l'algoritmo previsto per WCAG 3) corregge questo con una metrica percettivamente uniforme; mostriamo entrambi i numeri così da poter pianificare in anticipo. OKLCH è uno spazio colore CSS recente percettivamente uniforme — passi numerici uguali in L (lightness) appaiono uguali all'occhio, il che rende molto più facile generare palette coerenti rispetto a HSL.

Domande frequenti

Qual è la soglia WCAG AA?

Per testo normale: rapporto di contrasto ≥ 4,5:1 tra testo e sfondo. Per testo grande (≥ 18pt regular, o ≥ 14pt bold): rapporto ≥ 3:1. Il livello AAA è più rigoroso (7:1 / 4,5:1). La maggior parte dei siti pubblici punta a AA; le interfacce governative e sanitarie richiedono sempre più spesso AAA. Il nostro checker mostra pass/fail per ogni soglia in modo da non dover memorizzare i numeri.

Perché HEX e RGB sono equivalenti?

Sono lo stesso colore scritto in modo diverso. #3366FF è solo un'abbreviazione per "red=0x33 (51), green=0x66 (102), blue=0xFF (255)" — tre byte. La notazione RGB in CSS (rgb(51, 102, 255)) scrive gli stessi tre byte in decimale. HEX è più compatto (7 caratteri contro circa 17); RGB è più leggibile quando si deve calcolare sui canali. Si utilizzi quello più adatto al contesto; il risultato è identico.

Cos'è OKLCH e dovrei usarlo?

OKLCH è uno spazio colore di CSS Color 4 progettato per essere percettivamente uniforme — salti numerici uguali in L (lightness), C (chroma) o H (hue) appaiono uguali all'occhio. HSL non è uniforme; un giallo brillante a L=80 sembra molto più luminoso di un blu navy a L=80. Per design system e palette tonali OKLCH è drasticamente più facile con cui lavorare. Il supporto browser è eccellente (Safari 16.4+, Chrome 111+, Firefox 113+).

Il contrast checker supporta l'opacità?

Sì — i foreground semi-trasparenti vengono composti contro il colore di sfondo prima del calcolo del contrasto, che è ciò che gli esseri umani effettivamente vedono. rgba(0,0,0,0.6) su bianco viene reso come lo stesso colore di #666666 su bianco, e li trattiamo in modo identico. Se si compone contro uno sfondo complesso (immagine, gradiente), si scelga il colore medio dello sfondo come riferimento.