Verificatore di Matrice di Contrasto

Perché controllare tutte le combinazioni di colori insieme, invece di una alla volta?

Le linee guida di accessibilità WCAG richiedono un rapporto di contrasto minimo tra testo e sfondo, altrimenti gli utenti ipovedenti o con daltonismo potrebbero non riuscire a leggere il testo. In pratica, la maggior parte dei siti combina più colori del brand, colori di sfondo e colori di stato —un titolo nel colore principale su una card grigio chiaro, un colore di avviso su sfondo bianco, testo scuro su uno sfondo colorato— e controllare ogni coppia manualmente porta facilmente a errori o dimenticanze. Questo strumento ti permette di incollare tutti i colori effettivamente utilizzati e calcola istantaneamente il rapporto di contrasto per ogni coppia possibile, presentato in un'unica matrice —non serve più controllare le combinazioni una per una.

Come si calcola il rapporto — un esempio concreto

WCAG 2.1 definisce il rapporto di contrasto come (L1 + 0,05) / (L2 + 0,05), dove L1 e L2 sono la luminanza relativa dei due colori (valori più alti indicano una maggiore vicinanza al bianco). Il nero puro #000000 su bianco puro #FFFFFF ottiene un perfetto 21:1, ma il grigio chiaro #999999 su bianco ottiene solo 2,85:1 —ben sotto il minimo di 4,5:1 richiesto per il testo normale. Il testo normale (sotto i 18px, o sotto i 14px in grassetto) richiede AA ≥ 4,5:1, oppure AAA ≥ 7:1 per uno standard più rigoroso; il testo grande (18px+ in grassetto o 24px+) ha una soglia più permissiva di AA ≥ 3:1.

Come leggere la matrice dei risultati

Ogni cella della matrice mostra il rapporto di contrasto tra il colore di quella riga e quello di quella colonna, colorata in verde (supera AAA), giallo (supera solo AA) o rosso (non supera) —così puoi individuare a colpo d'occhio le combinazioni problematiche invece di calcolarle una per una a mano.

Il contrasto viene calcolato esclusivamente in base al valore RGB di ciascun colore —non tiene conto del peso del font, dell'anti-aliasing o delle sovrapposizioni semi-trasparenti nel rendering reale. Verifica sempre su un dispositivo reale prima della pubblicazione.