Rapporto di contrasto
Vedi anche: color contrast
Il rapporto di luminanza tra il testo in primo piano e il suo sfondo, su una scala da 1:1 a 21:1. WCAG 2.x richiede 4,5:1 per il testo normale e 3:1 per il testo grande (≥18pt o 14pt grassetto) al Livello AA.
Il rapporto di contrasto misura la differenza percettiva di luminanza tra due colori — in genere il testo e il suo sfondo. La scala va da 1:1 (nessun contrasto — bianco su bianco) a 21:1 (nero puro su bianco puro). WCAG definisce rapporti minimi per la leggibilità del testo.
Le soglie WCAG
I criteri di successo WCAG 2.x 1.4.3 (Contrasto minimo, Livello AA) e 1.4.6 (Contrasto avanzato, Livello AAA) stabiliscono i seguenti valori minimi:
| Tipo di testo | AA | AAA |
|---|---|---|
| Testo normale (< 18pt o < 14pt grassetto) | 4,5:1 | 7:1 |
| Testo grande (≥ 18pt o ≥ 14pt grassetto) | 3:1 | 4,5:1 |
| Oggetti grafici + componenti UI (1.4.11) | 3:1 | — |
WCAG 2.x misura il contrasto con la formula WCAG (un rapporto basato sulla luminanza). WCAG 3 sta esaminando una formula alternativa percettivamente uniforme («APCA» — Accessible Perceptual Contrast Algorithm) che si comporta diversamente per sfondi molto scuri o molto chiari; APCA non è ancora normativo.
Cosa viene trascurato
Il contrasto è una delle poche regole WCAG che uno strumento automatico può rilevare con certezza, per cui i tool di scansione automatica individuano la maggior parte dei problemi di testo-su-sfondo puro. Ciò che sfugge ancora:
- Testo segnaposto negli input. Spesso #999 o più chiaro su bianco — non supera il Livello AA. I progettisti ricorrono a segnaposto a basso contrasto per distinguerli dal valore inserito, ma la buona pratica è usare un
<label>separato sopra il campo e un segnaposto ad alto contrasto (o nessun segnaposto). - Stati hover e focus. Un pulsante con contrasto adeguato nello stato predefinito può non superarlo al passaggio del puntatore (ad esempio, uno stato hover grigio chiaro su sfondo bianco). È necessario verificare tutti gli stati visivi degli elementi interattivi.
- Controlli disabilitati. I controlli disabilitati sono formalmente esentati dal contrasto AA, ma visualizzarli con il solo basso contrasto non offre agli utenti con deficit della visione dei colori alcun modo di capire che il controllo è disabilitato. Abbinare il colore a un altro segnale — un’icona, una modifica dell’etichetta o
aria-disabledaffinché i screen reader lo annuncino. - Testo su immagini e gradienti. Le sovrapposizioni nelle sezioni hero in cui lo stesso testo passa su un’area chiara e su un’area scura dell’immagine di sfondo falliscono spesso nella zona più chiara.
- Icone usate come unica etichetta. Un’icona da 24 pixel senza testo necessita di un rapporto 3:1 rispetto allo sfondo (1.4.11), e sono i pixel significativi dell’icona — i tratti del contorno — a essere misurati.
Test operativo
Tre flussi di lavoro riducono i problemi di contrasto fin dalle prime fasi:
- Linting in fase di design. Stark, Able e il checker di accessibilità di Adobe XD calcolano il contrasto direttamente nello strumento di design. È meglio correggere prima che il codice sia scritto.
- Palette tokenizzate. Definire ogni combinazione testo/sfondo come un token il cui contrasto viene verificato una sola volta. Non consentire valori di colore ad hoc sui componenti che contengono testo.
- Controlli automatizzati in CI. axe-core, Pa11y o Lighthouse interrompono le build in presenza di violazioni del contrasto. Economici da aggiungere, costosi da ignorare.
Oltre il valore minimo
4,5:1 è un minimo, non un obiettivo estetico. Gli utenti con lieve deficit della visione dei colori, perdita della vista legata all’età o display di bassa qualità preferiscono 7:1 o superiore per il testo del corpo. Un sito che soddisfa appena il Livello AA su ogni elemento risulta generalmente a basso contrasto anche per gli utenti senza menomazioni formali.