La storia dietro la verifica del contrasto
Un contrasto basso è uno dei problemi di accessibilità più comuni sul web. Le sue regole sembrano numeri magici, ma ognuna ha un motivo, legato a come gli occhi perdono sensibilità con l'età e a come gli schermi producono la luce.
Da dove vengono 4,5 e 7
WCAG 2.0 è diventato una raccomandazione W3C nel dicembre 2008. Gli autori sono partiti da un minimo di 3:1 tratto dalla norma ISO 9241-3 e lo hanno alzato per compensare la perdita di sensibilità al contrasto di una vista di circa 20/40, comune intorno agli 80 anni. Così è nato 4,5:1 per il livello AA. Il livello AAA, 7:1, fa lo stesso per una vista di circa 20/80.
La luminanza relativa
La formula riporta prima ogni canale sRGB in luce lineare, poi pesa rosso, verde e blu con 0,2126, 0,7152 e 0,0722, gli stessi pesi dello standard televisivo ITU-R BT.709, perché l'occhio è più sensibile al verde. Il rapporto è la luminanza più chiara più 0,05 divisa per la più scura più 0,05. Lo 0,05 rappresenta la luce riflessa dallo schermo e limita la scala da 1:1 a 21:1, nero su bianco.
Oltre il testo
Il testo grande, almeno 24 px o 18,66 px in grassetto, resta leggibile con meno contrasto e richiede solo 3:1 per AA. WCAG 2.1, pubblicato nel giugno 2018, ha aggiunto il criterio 1.4.11 Contrasto non testuale: bordi dei campi, indicatori di focus, icone e le parti di un grafico necessarie a capirlo devono raggiungere 3:1 rispetto a ciò che hanno accanto.
Daltonismo e futuro
Circa un uomo su 12 e una donna su 200 hanno un deficit della visione dei colori, soprattutto per rosso e verde. Il contrasto si misura sulla luminanza, quindi una coppia conforme resta leggibile, ma colori che differiscono solo per la tinta possono sembrare uguali. La simulazione usa il modello di Machado, Oliveira e Fernandes del 2009. Le bozze di WCAG 3 studiano APCA, un metodo più recente che considera anche la dimensione del testo e se il testo è scuro su chiaro o chiaro su scuro.
Domande frequenti
Un buon contrasto basta per l'accessibilità?
No. È un requisito tra tanti. Le WCAG chiedono anche che il colore non sia l'unico modo per comunicare un significato, per esempio aggiungendo un'icona o una sottolineatura a un link o a un errore.
La simulazione mostra esattamente ciò che vede una persona?
È una buona approssimazione della dicromia completa. Molte persone ne hanno una forma più lieve e ognuno vede in modo un po' diverso, quindi usala come guida.
Devo usare APCA invece del rapporto WCAG 2?
Per la conformità oggi usa il rapporto WCAG 2. WCAG 2.2, pubblicato nell'ottobre 2023, mantiene la stessa formula, e leggi e norme come la EN 301 549 vi fanno riferimento. APCA è ancora in sviluppo.
Strumenti correlati
Verifica del contrasto dei colori
Verifica gratuita del contrasto WCAG: inserisci i colori del testo e dello sfondo in HEX, RGB o HSL, vedi il rapporto di contrasto con i risultati AA e AAA, ottieni il colore conforme più vicino e simula il daltonismo.
Generatore di tavolozze colori
Crea, blocca e rimescola tavolozze nel browser. Copia HEX, variabili CSS o JSON, esporta PNG o SVG ed estrai i colori da una foto.
Ruota dei colori
Scegli un colore su una ruota interattiva, genera tavolozze complementari, analoghe, triadiche e di altro tipo e copia HEX, RGB, HSL, HSV o CMYK.
Editor di sfumature
Crea sfumature CSS lineari e radiali nel browser. Trascina i fermi colore, imposta l’angolo e copia CSS, HEX, RGB, HSL, HSV o CMYK.
Colori
Come funziona il colore su schermo e in stampa: RGB, CMYK, HSL, hex, ruota dei colori, gradienti, contrasto e strumenti PictorX.
Pronto a provarlo?
Apri PictorX nel tuo browser: nessuna installazione, nessuna carta di credito richiesta per iniziare.
Apri la verifica del contrasto