Hedron Contrast Checker

Quando si parla di accessibilità visiva, il rapporto di contrasto è quasi sempre il primo numero che viene citato. 4,5:1. Sufficiente, sì o no. Fine della storia. Ma la storia, in realtà, è molto più interessante e quel numero da solo non basta.

Abbiamo costruito il Contrast Checker di Hedron partendo esattamente da questa consapevolezza: un tool che non si limita a dire "passa" o "non passa", ma aiuta a capire perché una coppia di colori funziona o no e con quali vincoli tipografici.

Come funziona il contrasto nelle WCAG 2.x

Le WCAG 2.x misurano il contrasto come rapporto tra le luminanze relative di testo e sfondo. Il risultato è un singolo valore, con queste soglie:

• AA: 4,5:1 per testo normale, 3:1 per testo grande (≥ 18pt o 14pt bold)
• AAA: 7:1 per testo normale, 4,5:1 per testo grande

È un modello semplice e verificabile. Proprio questa semplicità, però, è anche il suo limite principale.

Dove il modello WCAG 2.x mostra i suoi limiti

Il rapporto di contrasto tratta tutti i testi come equivalenti, indipendentemente da dimensione, peso tipografico e contesto. Questo produce risultati che, nella pratica, non rispecchiano sempre l'esperienza reale di lettura.

Il problema della polarità

Il modello WCAG 2.x è bidirezionale: un testo bianco su sfondo nero produce lo stesso rapporto (21:1) di un testo nero su sfondo bianco. Eppure chiunque abbia usato un'interfaccia in dark mode sa che la percezione è diversa. Il testo chiaro su scuro tende ad "allargarsi" visivamente: un font sottile diventa difficile da leggere anche con un contrasto teoricamente altissimo.

Il peso del font non esiste

Un testo in 14px con font-weight 100 (ultra-thin) ottiene lo stesso giudizio di conformità di uno in 14px a 700 (bold), a parità di colori. Nella realtà, il testo ultra-thin è molto più difficile da leggere. Lo standard ignora completamente questa variabile.

Falsi positivi e falsi negativi

Alcune combinazioni di colori saturi superano la soglia AA ma risultano affaticanti per chi ha una sensibilità al contrasto ridotta: certi gialli brillanti su bianco, o certi rossi mattone su sfondo grigio caldo, ne sono esempi tipici. Al contrario, certi testi in dark mode con contrasto appena sotto soglia sono perfettamente leggibili nel contesto reale.

APCA: misurare il contrasto come lo vede il cervello

L'APCA (Accessible Perceptual Contrast Algorithm) è l'algoritmo sviluppato da Myndex Research: il progetto è disponibile su GitHub. Invece di un semplice rapporto, APCA produce un valore Lc (Lightness Contrast) su una scala da –108 a +106, basato sul modello percettivo S-LUV sviluppato specificamente per i display auto-illuminati.

Il segno del valore indica la direzione: positivo per testo chiaro su sfondo scuro, negativo per testo scuro su sfondo chiaro, riflettendo il fatto che le due situazioni non sono percettivamente equivalenti.

Le novità più importanti rispetto al modello WCAG 2.x:

• Peso e dimensione del font come variabili reali. APCA tiene conto sia della dimensione che del peso tipografico: un testo bold a parità di dimensione è intrinsecamente più leggibile e richiede meno contrasto.
• Polarità distinta. Il modello separa i due casi: testo chiaro su scuro e testo scuro su chiaro, perché il sistema visivo umano li elabora in modo diverso, con effetti di irradiazione che cambiano la larghezza percepita delle lettere.
• Contesto d'uso. APCA distingue tra testo fluente (body copy), testo UI (etichette, pulsanti) e testo decorativo, con soglie diverse per ciascuno, perché la leggibilità non è la stessa esigenza in tutti i casi.

Il contrasto, da solo, non basta

Anche con APCA, il valore Lc è una condizione necessaria ma non sufficiente per una buona leggibilità. Esistono altri fattori che nessun algoritmo di contrasto può catturare da solo:

• Spaziatura e interlinea. Una spaziatura insufficiente tra lettere o righe aumenta la fatica visiva anche con un contrasto ottimo, in particolare per chi ha dislessia o difficoltà cognitive.
• Scelta del font. Font con tratti fini o alta ambiguità tra caratteri simili (I, l, 1; O, 0) degradano la leggibilità indipendentemente dal contrasto.
• Contrasto simultaneo. Lo stesso colore appare più chiaro o più scuro a seconda di ciò che lo circonda. Un valore calcolato su sfondo tinta unita può non rispecchiare ciò che l'utente vede su un'interfaccia con gradienti o pattern.
• Lunghezza della riga e densità del testo. Righe molto lunghe o blocchi densi aumentano il carico cognitivo, specialmente per utenti con disturbi dell'attenzione.
• Condizioni ambientali. Luce solare diretta, calibrazione del display, dimensione fisica dello schermo: variabili fuori dal controllo del designer che però impattano la leggibilità reale.

Il contrasto è un punto di partenza obbligatorio, non il punto di arrivo.

Il Contrast Checker di Hedron: WCAG 2.x e APCA nello stesso tool

Partendo da queste premesse, abbiamo costruito il nostro Contrast Checker per offrire una visione completa, non solo un numero di conformità. Inserendo una coppia di colori si ottiene:

• Il rapporto di contrasto WCAG 2.x con verifica dei livelli AA e AAA
• Il valore Lc APCA, con indicazione della conformità per diversi pesi e dimensioni di testo
• Un'anteprima visiva nelle due direzioni (testo scuro su sfondo chiaro e testo chiaro su sfondo scuro)
• Suggerimenti di correzione automatici per i colori che non raggiungono le soglie

Il progetto è open source, disponibile su GitHub con licenza GPL v3 e aperto a contributi. Può essere testato e utilizzato direttamente su contrastchecker.hedron.it.

Il tool non sostituisce un audit di accessibilità

I tool automatici, incluso il nostro, sono strumenti di screening iniziale, non di validazione finale. Non analizzano testo su immagini o gradienti, non rilevano problemi nei componenti interattivi (stati hover, focus, disabled), non valutano il contrasto in dark mode o con i filtri di accessibilità del sistema operativo.

La verifica manuale da parte di Web Accessibility Expert certificati rimane indispensabile per identificare le non conformità che nessun algoritmo riesce a intercettare da solo.

Credits: foto di copertina di Sóc Năng Động da Pexels.