Durante una recente modifica del design del nostro componente stepper, ho notato durante una revisione dell'accessibilità che le linee grigie utilizzate per collegare i nostri passaggi incompleti non superavano i requisiti di contrasto se posizionate su uno sfondo bianco.

Dopo averlo rilevato, è stata una semplice soluzione utilizzare un grigio dalla nostra tavolozza di colori che superava i requisiti di contrasto del colore 3:1 per gli elementi grafici. Ed ecco come appariva:

Aggiornamento del colore inaccessibile

Ora avevamo uno stepper che utilizzava colori che soddisfano i requisiti di contrasto. Abbiamo anche riscontrato chiare differenze tra i numeri dei passaggi completati (sostituiti da un segno di spunta), il passaggio corrente (riempito di nero) e i passaggi incompleti (l'inverso del passaggio corrente).

Tuttavia, non volevamo fermarci qui. Volevamo andare oltre la conformità. Abbiamo notato che le nuove linee grigie incomplete erano difficili da differenziare con le linee complete. Tenendo presente la guida "Uso del colore", abbiamo provato ad aggiornare le linee incomplete per renderle più facili da distinguere. Ecco cosa abbiamo ottenuto:

Il disegno finale

Alla fine, abbiamo usato una linea tratteggiata (o incompleta) per indicare i passaggi incompleti. In questo progetto finale non ci affidiamo più solo al colore per distinguere tra i diversi stati.

Prossimi passi

Siamo fiduciosi che il nostro design finale renda tutto più chiaro. Tuttavia, una persona ha affermato che la linea tratteggiata potrebbe confondere le persone nel pensare che le fasi incomplete siano facoltative. Questo è qualcosa che metteremo in ricerca per scoprirlo prima di pubblicarlo.

Cosa ne pensi?

Mi piacerebbe conoscere la tua opinione sugli aggiornamenti che abbiamo apportato. Era necessario fare il passo in più? Avremmo potuto fare qualcos'altro per migliorare il design?