A more accessible stepper component

After discovering an inaccessible colour in our stepper, we wanted to go a step further than just compliance

The original stepper component. We wanted to use different coloured lines to denote the difference between a completed step and an incomplete step

During a recent design tweak to our stepper component, I noticed during an accessibility review, that the grey lines being used to connect our incomplete steps didn’t pass contrast requirements when placed on a white background.

After picking up on it, it was a simple fix to use a grey from our colour palette that passed the 3:1 colour contrast requirements for graphical elements. And here’s what that looked like:

After making the update, the difference between the complete steps and the incomplete steps were harder to notice

Updating the inaccessible colour

Now we had a stepper using colours that pass the contrast requirements. We also had clear differences between the completed step numbers (replaced by a tick), the current step (filled with black) and the incomplete steps (the inverse of the current step).

However, we didn’t want to stop there. We wanted to move beyond compliance. We noticed the new incomplete grey lines were hard to differentiate with the complete lines. Keeping in mind the ‘Use of colour’ guidance we tried updating the incomplete lines to make them easier to distinguish. Here was what we ended up with:

The final design uses a dashed line to denote the incomplete steps

The final design

In the end, we used a dashed (or incomplete) line to denote the incomplete steps. In this final design we’re no longer relying on colour alone to distinguish between the different states.

Next steps

We’re confident our final design makes everything clearer. However, one person did raise that the dashed line may confuse people to possibly thinking the incomplete stages are optional. This is something we’re going to put into research to find out before pushing it live.

What do you think?

I’d love to hear your thoughts on the updates we made. Was is necessary to take the extra step? Could we have done something else to improve the design?