While looking at a design mockup of a change password screen, I was reviewing a part that listed a criteria of what the password should contain.
The section was a text list with green check marks to indicate an item in the criteria was met and red X’s to indicate an item in the criteria wasn’t met.
My initial desire was to update the section to do away with the checks and X’s and replace them with circles that simply change colors based on met or unmet criteria — think in terms of traffic lights. I thought by doing this, the UI would look a little cleaner.
But fighting the urge, I took a moment to think about why colored shapes would be the better choice here. What I came to was, that it’s beneficial in terms of accessibility for users who might have visual impairments such as color blindness.
I don’t know much about color blindness, other than the quick glance over the Wikipedia page on it, but what I gathered was enough to deter me away from my desire to use colored circles and stick with the colored, differing shapes.
If I was to implement the colored circles idea, I could imagine there being instances where it would be tough to differentiate between a met and unmet criteria because the visual differentiator is only color. But by using differing colors and shapes, if there is an impairment on a user’s vision, at least there is a fallback of shapes to reenforce what is a met and unmet criteria.
This post isn’t meant to be read as professional advice of sorts. I admit I don’t have much depth in knowledge of visual impairments or accessible design. It was more of an “aha moment” for me as I was thinking about why a certain design decision was made and how it could be beneficial to a user who may have different needs than I have.
