# Da HEX a OKLCH: palette accessibili e verifica contrast 2.1 > Color picker online con conversioni HEX/RGB/HSL/OKLCH/Lab e WCAG 2.1 contrast checker (AA/AAA). Palette OKLCH per design accessibile. Strumento gratuito nel browser (nessun upload): https://www.mauriziofonte.it/strumenti/color-picker Converti tra **HEX, RGB, HSL, OKLCH, Lab** in modo bidirezionale, genera palette *perceptually uniform* via OKLCH e verifica il contrast ratio rispetto allo standard **WCAG 2.1 AA/AAA**. Pensato per chi disegna interfacce e si prende cura dell'accessibilità: la combinazione OKLCH per la coerenza percettiva e WCAG per l'accessibilità reale produce palette robuste alla prima passata. ## Come usare il color picker 1. **Scegli un colore** - Click sul native color picker per aprire il selettore del sistema operativo, oppure incolla un valore in qualsiasi campo (HEX, RGB, HSL, OKLCH, Lab). I cinque campi sono **bidirezionali**: cambiando uno, gli altri quattro si aggiornano. 2. **Verifica il contrast WCAG** - La sezione contrast checker mostra il ratio del colore contro fondo bianco o nero, e il PASS/FAIL per i quattro livelli WCAG 2.1: testo normale AA (4.5:1), testo normale AAA (7:1), testo grande AA (3:1), testo grande AAA (4.5:1). 3. **Genera la palette** - La palette OKLCH genera 9 stop di luminance del colore base mantenendo C (chroma) e H (hue) costanti. Risultato: un set di shade armoniche perceptually uniform, utili per design system. Click su una swatch per impostare il colore principale a quello. 4. **Copia il valore** - Click sul bottone copy a destra di ogni campo per portare il valore CSS-ready negli appunti. I formati emessi sono compatibili con CSS Color Module Level 4 (oklch(), lab() supportati da tutti i browser moderni dal 2023). ## Perché questo color picker Tre cose separano questo tool dai color picker generici in SERP. **OKLCH first-class.** OKLCH (Oklab Lightness Chroma Hue) è lo spazio colore *perceptually uniform* definito da Bjørn Ottosson nel 2020 e standardizzato in CSS Color Level 4. Significa che differenze numeriche di L (lightness) corrispondono a differenze di luminosità percepita uniformi dall'occhio umano. Confronto pratico: due colori HSL con stessa S e L ma H diversi possono apparire molto diversi in luminosità (un giallo HSL chiaro accanto a un blu HSL con la stessa L viene percepito come molto più chiaro). In OKLCH, due colori con stesso L appaiono ugualmente luminosi indipendentemente dal hue. Questo rende OKLCH lo strumento ideale per generare palette accessibili: bastano stesso C e H più variazioni di L per ottenere shade coerenti fra loro. **WCAG 2.1 contrast checker integrato.** Le linee guida WCAG 2.1 per accessibilità richiedono ratio minimo 4.5:1 per testo normale (AA) e 7:1 per AAA. Il calcolo segue la formula ufficiale: luminanza relativa di sRGB linearizzato, ratio `(L1+0.05)/(L2+0.05)` con L1 più chiaro, costanti standard (0.2126/0.7152/0.0722). Test automatico contro nero (`#000`) e bianco (`#FFF`) come foreground. Per palette aziendali, gli stop OKLCH passano spesso il check al primo colpo proprio grazie alla distribuzione perceptually uniform. **Output canonical CSS Level 4.** Tutte le conversioni sono formule matematiche chiuse standard (matrici sRGB-XYZ, CIE 1976, Ottosson 2020) eseguite localmente nel browser. L'output è già nel formato canonical accettato dai parser CSS moderni: `oklch(50.86% 0.1545 245.8)`, `lab(40.13 -8.86 -49.05)`, da incollare direttamente nei fogli di stile. ## Glossario - **sRGB**: Spazio colore standard del web definito in IEC 61966-2-1 (1999). Gamut: ~35% dei colori visibili. Default per tutti i monitor consumer fino al 2018. - **OKLCH**: Spazio colore polare (Lightness, Chroma, Hue) basato su OKLab. Bjorn Ottosson, 2020. Standardizzato in CSS Color Level 4. Perceptually uniform. - **Lab CIE 1976**: Spazio colore L*a*b* della Commission Internationale de l'Eclairage. Tentativo storico di perceptual uniformity, ma con errori noti in alto chroma (blu, viola). Utile per backward compatibility, OKLCH è superiore. - **WCAG contrast ratio**: Formula (L1+0.05)/(L2+0.05) con L1, L2 luminanza relativa sRGB. Range 1:1 (identici) a 21:1 (nero su bianco). Soglie WCAG 2.1: 3:1 large AA, 4.5:1 normal AA, 7:1 normal AAA. - **Gamut**: L'insieme di colori rappresentabili in uno spazio colore. sRGB ~35% del visibile, Display P3 ~45%, Rec.2020 ~75%. OKLCH è gamut-agnostic: rappresenta qualsiasi colore se il display lo supporta. - **Hue stability**: Proprietà di uno spazio colore: cambiare L preserva la hue percepita. HSL non ha hue stability (blu chiaro vira viola). OKLCH si. ## Domande frequenti ### Posso incollare colori in formato CSS direttamente? Si. I parser sono permissivi: `#0065c0`, `0065c0`, `rgb(0, 101, 192)`, `0 101 192`, `hsl(207, 100%, 38%)`, `oklch(50.86% 0.1545 245.8)`, `lab(40.13 -8.86 -49.05)` sono tutti riconosciuti. Le virgole, le percentuali, gli spazi sono opzionali nei separatori. ### Perché due formati diversi mi danno lo stesso colore visivamente? Perché i formati sono lossless tra loro per colori dentro il gamut sRGB. HEX RGB HSL sono identità matematiche (sRGB è la base). OKLCH Lab XYZ sRGB hanno conversioni a roundtrip esatte (a meno di rounding sull'ultimo digit). Il Lab è calcolato sul bianco D50, lo stesso della funzione CSS lab(): il valore copiato si incolla in un foglio di stile e rende lo stesso colore. Le piccole differenze che restano vengono dall'arrotondamento a 8 bit per canale. ### Il contrast checker AAA è troppo restrittivo per i miei brand color, posso ignorarlo? AAA è obbligatorio solo per servizi pubblici (PA, sanità) in alcuni paesi. Per la maggior parte dei siti commerciali, AA (4.5:1 normale, 3:1 large) è lo standard accettato (Direttiva UE 2102, WCAG 2.1 AA target). Se i tuoi brand color falliscono AA, puoi: 1) usarli solo come accent decorativo, mai come testo principale, 2) modificare la palette aumentando il delta L, 3) usare colori diversi per testo (palette "text" derivata). ### Perché usare OKLCH invece del classico HSL? Tre motivi. 1) Perceptual uniformity: in OKLCH due shade con stesso L appaiono ugualmente luminose, in HSL no (giallo a L=50 sembra più chiaro di blu a L=50). 2) Hue stability: cambiare L in HSL fa virare la hue percepita, in OKLCH no. 3) Wide gamut: OKLCH può rappresentare colori P3 e Rec.2020 nativamente, HSL è bloccato a sRGB. ### I valori OKLCH/Lab si rendono fuori gamut sRGB? Possono. Se OKLCH(70% 0.4 250) finisce fuori dal gamut sRGB, il converter clamps gli RGB risultanti a [0, 255], producendo un colore sRGB "più vicino" ma non identico. Se vuoi vedere quando questo succede: confronta il valore OKLCH che hai inserito con il valore OKLCH calcolato dall'RGB clipped. Differenze significative = clipping. Per uso web standard non è un problema, gli RGB sono comunque dentro gamut. ### Funziona offline? Sì. Tutte le conversioni sono formule matematiche chiuse calcolate direttamente nel browser; una volta caricata la pagina, il tool continua a funzionare anche senza connessione. ### C'è una API per integrare le conversioni in uno script o plugin? Non come endpoint HTTP. Per scripting: tutte le formule sono pubbliche (sRGB IEC 61966-2-1, CIE 1976, Ottosson 2020) e implementabili in qualsiasi linguaggio. Per JavaScript: il file `color_picker-gui.js` di questo tool è una source-of-truth riusabile. In Python: `colour-science`. In Node: `color-js`. ### WCAG 3 (APCA) è previsto? Non in V1. APCA (Accessible Perceptual Contrast Algorithm) è la nuova metrica proposta per WCAG 3 ma è ancora in draft (non ratificata al 2026). Quando WCAG 3 diventa W3C Recommendation aggiungo APCA come check supplementare. Per ora WCAG 2.1 è lo standard legalmente vincolante (UE Direttiva 2102, US ADA Section 508). --- Uno strumento di Maurizio Fonte, senior backend engineer. Tutti gli strumenti: https://www.mauriziofonte.it/strumenti/