HELMLAB: An Analytical, Data-Driven Color Space for Perceptual Distance in UI Design Systems

Il paper presenta HELMLAB, uno spazio colore analitico basato sui dati con 72 parametri progettato per i sistemi di design UI, che supera le prestazioni di CIEDE2000 nella misurazione delle distanze percettive garantendo al contempo invertibilità matematica e strumenti pratici per l'adattamento ai temi chiaro/scuro.

L'essenziale

Immagina che i colori su uno schermo non siano solo numeri, ma una lingua complessa che il nostro cervello cerca di decifrare. Per anni, gli sviluppatori di interfacce utente (come le app che usi ogni giorno) hanno dovuto usare una "traduzione" un po' vecchia e imprecisa per dire al computer: "questo rosso è più scuro di quello blu" o "questo grigio è davvero grigio, senza sfumature di colore".

Il paper che hai condiviso presenta HELMLAB, un nuovo modo per parlare di colori, creato specificamente per il design moderno (app, siti web, schermi).

Ecco una spiegazione semplice, usando metafore quotidiane:

1. Il Problema: La "Mappa Vecchia"

Immagina di avere una mappa del mondo (il vecchio sistema di colori, chiamato CIEDE2000). È utile, ma se provi a disegnare un percorso da Roma a Milano, la mappa ti dice che sono distanti 100 km, mentre in realtà sono 120. Oppure, se chiedi alla mappa di mostrarti un "grigio puro", lei ti dà un grigio che ha un leggero tocco di verde o di blu.
Per un designer, questo è un incubo: se crei una sfumatura di grigi per un'interfaccia, potrebbero apparire macchie di colore indesiderate.

2. La Soluzione: HELMLAB, il "GPS Perfetto"

HELMLAB è come un nuovo GPS ad altissima precisione, addestrato su migliaia di osservazioni umane reali (non solo teorie matematiche).
Invece di usare regole fisse, HELMLAB è un sistema "imparante". È come se avessi 72 piccoli "manopole di regolazione" (parametri) che sono state girate e sintonizzate fino a quando il sistema non ha imparato esattamente come vede l'occhio umano.

3. Come Funziona (Le 3 Magie)

Il sistema fa tre cose principali che lo rendono speciale:

• La "Correzione del Grigio" (Neutral Correction):
  Immagina di avere un pennello che dovrebbe dipingere solo di grigio. Con i vecchi sistemi, il pennello lasciava sempre una macchia di colore. HELMLAB ha un "filtro magico" che, alla fine del processo, pulisce via qualsiasi traccia di colore dai grigi. Risultato? Un grigio è davvero grigio, perfetto per creare sfumature eleganti senza errori.
• La "Rotazione della Bussola" (Rigid Rotation):
  A volte, i colori sembrano essere un po' storti rispetto a dove ci aspettiamo che siano (il rosso non è esattamente dove dovrebbe essere). HELMLAB ruota leggermente la "bussola" dei colori per allinearli perfettamente con la nostra percezione, senza però cambiare la distanza tra i colori. È come ruotare una mappa per allinearla al nord, senza spostare le città.
• La "Correzione del Blu" (Blue-Band Refit):
  C'era un problema specifico: quando si passava dal blu al ciano (un azzurro chiaro), le sfumature sembravano "saltellare" invece di essere lisce. HELMLAB ha ricevuto una lezione specifica su questa zona (come uno studente che ripassa solo la materia in cui è più debole) per rendere quelle transizioni fluide come l'acqua.

4. Perché è Importante per te?

Non devi essere un matematico per capirlo, ma ecco cosa significa per l'esperienza utente:

• Contrasti migliori: L'app ti assicura che il testo sia leggibile sullo sfondo, calcolando la differenza di colore in modo più preciso.
• Sfumature perfette: Quando un'app passa dal chiaro allo scuro (o viceversa), i colori cambiano in modo naturale, senza strappi o macchie strane.
• Velocità: Anche se sembra complesso, è stato progettato per funzionare velocemente sui tuoi smartphone e computer.

In Sintesi

HELMLAB è come passare da una vecchia mappa di carta sbiadita a un Google Maps in 3D con realtà aumentata. Non solo ti dice dove sono le cose, ma ti assicura che la strada sia liscia, che il grigio sia grigio e che i colori siano esattamente come li vedi tu, non come li calcola un computer vecchio stile.

È stato testato su migliaia di coppie di colori e ha dimostrato di essere il 20% più preciso dei sistemi attuali, rendendo le interfacce digitali più belle, accessibili e piacevoli da usare.

Sommario tecnico

1. Il Problema

I sistemi di design per interfacce utente (UI) necessitano di uno spazio colore che soddisfi tre requisiti fondamentali, che nessuno spazio esistente riesce a fornire contemporaneamente:

1. Accuratezza nella previsione della differenza percettiva: Essenziale per il controllo del contrasto e la valutazione delle differenze cromatiche.
2. Asse neutro (acromatico) perfetto: I grigi devono mappare esattamente su crominanza zero ($a=b=0$) per garantire che le interpolazioni dei gradienti non producano artefatti di colore.
3. Allineamento dell'angolo di tinta: Le tinte primarie e secondarie devono corrispondere agli angoli convenzionali per manipolazioni programmatiche corrette.

Gli spazi esistenti presentano compromessi significativi:

• CIE Lab / CIEDE2000: Ottimi per la differenza colore, ma soffrono di "perdita di crominanza" sui grigi (i grigi non sono perfettamente neutri) e hanno un'accuratezza percettiva inferiore rispetto ai dati moderni (STRESS su COMBVD: 29.18).
• Oklab: Semplice e nativo CSS, ma ottimizzato per l'uniformità della tinta piuttosto che per la differenza colore (STRESS: 47.5).
• CAM16-UCS / IPT / Jzazbz: Complessi, costosi computazionalmente o con perdite di crominanza acromatiche.

Nessuno di questi spazi ottimizza congiuntamente la trasformazione dello spazio e la metrica della distanza end-to-end rispetto ai dati psicofisici.

2. Metodologia

HELMLAB è uno spazio colore analitico a 72 parametri che tratta l'intera pipeline di trasformazione (da CIE XYZ a una rappresentazione Lab) e la metrica di distanza come un singolo sistema ottimizzabile.

La Pipeline di Trasformazione (Forward Transform)

La trasformazione mappa CIE XYZ (illuminante D65) in HELMLAB attraverso 11 stadi, tutti i cui parametri sono ottimizzati congiuntamente:

1. Risposta dei coni: Una matrice $3\times3$ appresa ($M_1$) mappa XYZ a segnali simili alla risposta dei coni.
2. Compressione di potenza: Compressione di potenza con segno per canale, generalizzando la radice cubica di CIE Lab (esponenti ottimizzati $\approx 0.4$).
3. Proiezione Lab: Una seconda matrice ($M_2$) proietta i segnali compressi sui canali opposti ($L, a, b$).
4. Correzione della tinta: Una rotazione Fourier a 4 armoniche corregge le distorsioni sistemiche della tinta.
5. Incorporamento Helmholtz–Kohlrausch (H-K): Modifica la luminosità ($L$) in funzione della crominanza ($C$), poiché i colori saturi appaiono più luminosi di quelli acromatici a parità di luminanza.
6. Raffinamento della luminosità: Polinomio cubico con termini additivi dipendenti dalla tinta e compressione esponenziale per le regioni scure.
7. Elaborazione della crominanza: Quattro sottostadi intercalati (scaling dipendente dalla tinta, potenza non lineare, scaling dipendente da $L$, interazione tinta-luminosità).
8. Luminosità dipendente dalla tinta: Un fattore finale per catturare le interazioni residue.
9. Correzione Neutrale (Neutral Correction - NC): Stadio cruciale. Dopo tutti gli stadi non lineari, vengono calcolati gli errori acromatici su 256 livelli di grigio e viene applicata una correzione tramite interpolazione PCHIP. Questo garantisce che $a=b=0$ per tutti i grigi, eliminando la perdita di crominanza.
10. Rotazione Rigida: Una rotazione rigida del piano $(a, b)$ di $-28.2^\circ$ per allineare meglio le tinte primarie sRGB senza alterare la metrica di distanza (essendo un'isometria).

Metrica di Distanza

La metrica di distanza $\Delta E$ è composta da:

• Pesi dipendenti dalla coppia ($S_L, S_C$) ispirati a CIEDE2000 ma appresi dai dati.
• Un esponente di Minkowski ($p=0.804$) che favorisce leggermente le differenze di crominanza.
• Compressione monotona e post-potenza per ridurre i bias sistematici.

Ottimizzazione

I 72 parametri sono ottimizzati minimizzando una funzione di perdita che combina:

• STRESS sul dataset COMBVD (3.813 coppie).
• Un termine di regolarizzazione sul dataset He et al. 2022.
• Penalità "Blue-band": Una penalità specifica per ridurre la non uniformità dei gradienti nella regione blu-ciano (dove le versioni iniziali fallivano).
• Vincoli per accuratezza round-trip, integrità acromatica e uniformità Munsell.

3. Contributi Chiave

1. Nuovo Spazio Colore: HELMLAB con 72 parametri che raggiunge uno STRESS di 23.30 su COMBVD, riducendo l'errore del 20.2% rispetto a CIEDE2000 (29.18).
2. Correzione Neutrale: Garantisce $C < 10^{-6}$ per i colori acromatici con un costo minimo di STRESS (+0.04), risolvendo il problema dei gradienti colorati nei grigi.
3. Allineamento Tinta: Una rotazione rigida riduce l'errore RMS della tinta a 18.1° senza compromettere la metrica di distanza.
4. Correzione H-K Integrata: La luminosità dipende esplicitamente dalla crominanza, appresa dai dati.
5. Refit della Banda Blu: Una penalità sui sotto-dataset riduce la non uniformità dei gradienti nella regione blu-ciano di 8.9 volte con un costo trascurabile (+0.08 STRESS).
6. Utilità Pratiche: Include mappatura del gamut, export di token (CSS, Android, iOS) e adattamento per modalità chiara/scura.

4. Risultati

• Accuratezza: STRESS di 23.30 su COMBVD (vs 29.18 di CIEDE2000, 47.5 di Oklab). L'intervallo di confidenza al 95% non si sovrappone a quello di CIEDE2000 ($p < 10^{-4}$).
• Validazione Incrociata:
  • Su He et al. 2022: STRESS 30.3 (vs 32.6 di CIEDE2000).
  • Su MacAdam 1974: STRESS 20.3 (inferiore a CAM16-UCS che fa 18.7, ma comunque competitivo).
• Proprietà di Generazione:
  • Crominanza massima sui grigi: < $10^{-6}$ (zero leakage).
  • Errore round-trip: < $10^{-14}$.
  • Jacobiano positivo in tutto il gamut sRGB (mappatura invertibile).
• Analisi Ablativa: La correzione della tinta è il componente più critico (+15.5 punti di STRESS se rimossa), seguita dall'inserimento H-K (+4.0). La metrica di distanza appresa contribuisce ulteriormente a ridurre lo STRESS di 4.3 punti rispetto all'uso della sola distanza euclidea.

5. Significato e Impatto

HELMLAB rappresenta un passo avanti significativo per i sistemi di design UI:

• Usabilità Pratica: A differenza di spazi puramente percettivi che falliscono nella generazione di gradienti neutri, HELMLAB è progettato per essere utilizzato direttamente nella generazione di palette, token di design e controlli di contrasto.
• Superiorità Statistica: Dimostra che un approccio data-driven, che ottimizza l'intera pipeline (trasformazione + metrica) su dataset psicofisici moderni, supera i metodi ingegneristici tradizionali come CIEDE2000.
• Integrazione: Fornisce strumenti pronti all'uso per sviluppatori e designer (librerie Python, export per CSS/Android/iOS), facilitando l'adozione di spazi colore più percettivamente uniformi nelle applicazioni web e mobile.
• Limiti e Futuro: Lo spazio è ottimizzato per gamut sRGB/P3 e visualizzazione su schermo. La dipendenza dalle condizioni di visione (surround) è architetturalmente presente ma non ancora addestrata su dati specifici. Il compromesso nell'allineamento della tinta (18.1° RMS) è accettabile per l'UI ma non perfetto.

In sintesi, HELMLAB offre un compromesso ottimale tra accuratezza percettiva, proprietà matematiche per la generazione di contenuti e praticità di implementazione, ponendosi come un nuovo standard potenziale per i sistemi di design moderni.