SC 141 -- Color used to communicate steps in process

[damiansian]

URL

https://demo.fileyourstatetaxes.org/en/nj/landing-page

Issue

The green color is used to indicate the current step in the process. Technically, because you have the same information in text directly below the graphic, this is not a WCAG issue. However, it is presented here to you as a matter of user experience and enhancement.

alt: The form stepper shown in grayscale where the green and gray are very difficult to distinguish.

WCAG

SC 1.4.1:Use of Color (Level A)

User impact

People who are color vision deficient may have difficultly differentiating or distinguishing colors. The current step is indicated in green and the next steps in gray. The above shows the graphic without the ability to see color/hue and in that representation we can determine that color is used to communicate information. However, the same information is available in text below the graphic, so this is technically conforming. It's up to you all if you want to go the extra mile and make this component more explicit without relying on color alone.

Suggested fix

You may consider adding a symbol or some type of graphic embellishment to the green oval. Other design choices can be applied to achieve the same level of differentiation. A line below the current oval for example. If you can understand the context in grayscale, you have solved the issue from a design perspective.