Colore che tutti possono leggere

Circa una persona su dodici con biologia maschile e una su duecento con biologia femminile vede i colori in modo diverso, e tutti li vedono male sotto il sole. Il colore accessibile consiste soprattutto nel non affidarsi alla sola tinta.

  • #1f2937

  • #ffffff

  • #5576ff

  • #facc15

  • #b91c1c

Contrasto, misurato

Il rapporto di contrasto confronta la luminosità di due colori, da 1:1 (invisibile) a 21:1 (nero su bianco). Le WCAG chiedono 4.5:1 per il testo normale, 3:1 per il testo grande e 3:1 per elementi di interfaccia come bordi e icone. Non sono opinioni: si misurano, e quasi tutte le discussioni del tipo "il nostro colore di marca va bene" finiscono quando il numero compare a schermo.

Mai la sola tinta

Se l’unica differenza fra due stati è rosso contro verde, una parte dei tuoi utenti vede un solo stato. Aggiungi un secondo segnale: un’icona, un’etichetta, una trama, una posizione. Vale anche per i grafici, dove due serie vicine dovrebbero differire in luminosità oltre che in tinta, e per la validazione dei moduli, dove il messaggio conta più del colore del bordo.

Le due abitudini

Primo: scegli i colori del testo misurando e non a occhio; richiede pochi secondi e chiude la discussione. Secondo: guarda il progetto in scala di grigi prima di pubblicarlo. Se funziona ancora — se distingui il pulsante dallo sfondo e una linea del grafico dall’altra — funzionerà con il daltonismo, su uno schermo economico e in pieno sole.

La parte da ricordare

Misura il contrasto e assicurati che niente di importante sia affidato alla sola tinta.

Verifica un abbinamento nel controllore di contrasto

Altro dalla biblioteca