Matrice di contrasto colori

Questa matrice calcola la luminanza relativa WCAG 2 di ogni colore esadecimale fornito, confronta tutti i colori tra loro e restituisce i risultati in una matrice quadrata stabile. Designer, sviluppatori e professionisti dell’accessibilità possono esaminare in una sola volta l’intera palette di un sistema di progettazione, senza verificare ogni coppia separatamente. Gli input vengono convalidati, i colori normalizzati e il risultato deterministico è adatto ad audit automatici e rapporti versionati.

Legga la matrice mantenendo il riferimento ai colori

Invii un elenco contenente da due a cento colori esadecimali. Sono accettati i formati a tre e sei cifre, con o senza cancelletto iniziale, e ogni valore valido viene normalizzato in un codice minuscolo a sei cifre. La risposta elenca i colori normalizzati nello stesso ordine e assegna un indice a ciascuno. Righe e colonne rispettano esattamente tale ordine: il valore alla riga due e colonna cinque descrive quindi il contrasto tra i colori con indici due e cinque. La diagonale vale sempre 1, perché un colore non contrasta con sé stesso, e la matrice è simmetrica, dato che invertire primo piano e sfondo non modifica il rapporto WCAG. Ogni rapporto visualizzato viene arrotondato a due decimali e ogni luminanza a sei. I colori duplicati restano posizioni separate, una scelta utile per controllare token con lo stesso valore ma ruoli semantici diversi. Questo modello posizionale rende semplice mostrare una tabella, conservare una prova di audit o confrontare diverse versioni.

Comprenda il calcolo e le soglie WCAG

Il calcolo segue il metodo di luminanza relativa WCAG 2 per i colori sRGB. Ogni canale rosso, verde e blu viene convertito dal valore sRGB codificato alla luce lineare, quindi combinato usando i coefficienti standard. Per ogni coppia, la luminanza più chiara più 0.05 viene divisa per quella più scura più 0.05, ottenendo un rapporto da 1 a 21. La risposta include le soglie WCAG note: 4.5 per testo normale AA, 7 per testo normale AAA, 3 per testo grande AA e 4.5 per testo grande AAA. Confronti le celle con la soglia appropriata al contenuto e alla tipografia effettivi. Un rapporto da solo non certifica accessibile un’intera interfaccia, poiché contano anche dimensione e peso del carattere, stati interattivi, elementi non testuali e contesto. Lo strumento restituisce prove numeriche anziché un verdetto generale, così Lei può applicare la regola corretta a ogni abbinamento previsto senza scambiare un valore arrotondato per una garanzia complessiva.

Usi risultati deterministici negli audit di design

Una matrice completa è particolarmente utile quando il controllo della palette deve essere ripetibile. Mantenga i colori in un ordine documentato, per esempio neutri seguiti da token di marca, stato e accento, quindi salvi la matrice con la versione del sistema di progettazione. Un controllo di integrazione continua può confrontare celle selezionate con le soglie richieste, mentre chi esegue la revisione può esaminare l’intera tabella per trovare combinazioni deboli inattese. Poiché l’algoritmo non usa rete, casualità, ora corrente, stili del browser o stime del profilo colore, input JSON identici generano output JSON identici. Elenchi non validi, palette fuori limite e valori esadecimali errati vengono rifiutati con un indice chiaro. Il limite di cento colori circoscrive la matrice quadratica a diecimila celle. Gestisca trasparenza e composizione prima della chiamata: i colori alfa vengono rifiutati perché il risultato visibile dipende dallo sfondo. Converta inoltre nomi, HSL, valori ad ampia gamma oppure oggetti degli strumenti di design in hex sRGB opaco, per una base esplicita e riproducibile.