Controllo del Contrasto (livelli WCAG AA / AAA)

Come funziona il rapporto di contrasto

WCAG (Web Content Accessibility Guidelines) definisce il contrasto come il rapporto tra la luminanza relativa di due colori. La formula linearizza ciascun canale sRGB, li pondera in base alla sensibilità dell'occhio umano (R 0,2126, G 0,7152, B 0,0722), poi calcola (più chiaro + 0,05) / (più scuro + 0,05). Il risultato va da 1:1 (identici) a 21:1 (nero su bianco).

Calcoliamo questo nel tuo browser usando la formula ufficiale WCAG 2.x. I quattro badge verificano le soglie AA di 4,5:1 (normale) e 3:1 (grande), e AAA di 7:1 (normale) e 4,5:1 (grande). Il 'testo grande' è 24px / 18pt, o 18,66px / 14pt in grassetto.

Perché superare almeno il livello AA

AA è il livello applicabile legalmente in molte giurisdizioni (ADA statunitense, EN 301 549 UE, Equality Act britannico per i servizi digitali). Non superare AA nel testo del corpo è il problema di accessibilità più comune e il più facile da correggere durante il design piuttosto che dopo il lancio.

AAA è raccomandato per la lettura estesa, i servizi governativi e le interfacce ad alto rischio. È rigoroso — il grigio chiaro su bianco che sembra naturale a un designer spesso non supera facilmente AAA. Se il tuo sito serve principalmente contenuti da leggere di sfuggita, punta ad AA; se pubblichi libri, articoli o informazioni critiche, punta ad AAA.

Errori comuni

«Sembra a posto sul mio schermo.» Gli schermi calibrati, le luci fluorescenti degli uffici e l'uso degli smartphone all'aperto cambiano il contrasto percepito. Usa il rapporto, non il tuo occhio.

Progettare la modalità scura invertendo i codici hex. L'inversione cambia la tonalità e rompe il contrasto. Ri-testa ogni coppia di colori dopo aver cambiato tema.

Fidarsi delle linee guida del brand. Molte palette di brand sono state scelte prima della consapevolezza WCAG. Se il rosa del brand su bianco non passa, proponi un rosa leggermente più scuro per il testo del corpo e riserva l'originale per l'uso decorativo.