Uso del colore

Cosa richiede

Ogni volta che il significato di un elemento dell’interfaccia utente dipende dal suo colore — un messaggio di errore rosso, un indicatore verde «disponibile», un collegamento blu nel corpo del testo, una linea colorata su un grafico — quel significato deve essere trasmesso anche da qualcosa di diverso dal colore. Il criterio di successo non vieta il colore, vieta il solo colore. Circa 1 uomo su 12 e 1 donna su 200 presentano qualche forma di deficit della visione dei colori; a ciò si aggiungono le stampe in monocromia, gli schermi poco luminosi e gli ambienti con forte riverbero, che annullano regolarmente le distinzioni cromatiche.

Come soddisfarlo

• Sottolineare i collegamenti all’interno dei paragrafi di testo. Un colore diverso da solo non è sufficiente — è il fallimento canonico del criterio 1.4.1.
• Abbinare a ogni colore di stato un’etichetta o un’icona: il rosso con il testo «Errore», il verde con un segno di spunta, il giallo con un triangolo di avviso.
• Contrassegnare i campi obbligatori dei moduli sia con il colore (asterisco in rosso) sia con un indicatore testuale («obbligatorio»).
• Per i grafici, utilizzare stili di linea distinti (continua, tratteggiata, punteggiata) o simboli sui punti dati, non solo il colore.
• Associare gli indicatori di stato «disponibile / occupato / assente» al colore più la forma dell’icona (cerchio pieno, cerchio vuoto, trattino).
• Per la validazione dei moduli, lo stato non valido deve avere un messaggio di errore in aggiunta al bordo rosso.

Errori comuni

• Collegamenti nel corpo del testo mostrati solo tramite un blu leggermente diverso, senza sottolineatura. Gli utenti con daltonismo rosso-verde non percepiscono alcuna distinzione.
• Asterischi per i campi obbligatori mostrati in rosso senza aria-required e senza etichetta «obbligatorio».
• Grafici con cinque serie differenziate solo dal colore — stampare il grafico in scala di grigi rende le linee indistinguibili.
• Stati di errore stilizzati con solo un bordo rosso, senza testo di messaggio di errore.
• Indicatori «online / offline» che cambiano solo il colore, senza variazione di forma o etichetta.
• Grafici a torta con settori a luminanza simile etichettati solo nella legenda tramite il colore.

Perché è importante

Si tratta del fallimento 1.4.x più citato ed è tra i più facili da correggere in fase di design — basta aggiungere una sottolineatura, un’icona, un’etichetta. La correzione successiva è più difficile perché la palette del brand è spesso costruita attorno alla segnalazione basata solo sul colore. Le regole di Qualibooth, axe e Lighthouse non riescono sempre a rilevarlo automaticamente, quindi emerge nelle revisioni manuali.