Designing UI Forms for Color Blindness

Designing UI Forms for Color Blindness

Color blindness is a serious issue for many who use a PC.  One of my tasks for a client was to create a page similar to an existing quality check page. Products had physical attributes that needed to be measured. As the user entered information, the field would change color to indicate Pass, Warning, and Failed statuses.

Default Form

UI Form Default

Issues

First, textboxes and dropdowns do not look good with a colored background. Second, there was a user who was color blind.

Color blindness is more common than most people realize. Worldwide, 8% of men have color blindness compared to 0.5% of women. The discrepancy is due to the trait coming from a mutation of the X chromosome. Because the trait is recessive, men have color blindness when their mom passes it to them, whereas women need to receive it from both parents.

Initial Changes

UI Form Default

This is an example of the inspection page from the perception of the color blind user. There are different types of color blindness. This user could not see red or green very well, which is technically known as Deuteranopia. No wonder my client heard some negative feedback.

Redesign

UI Form Default

In my redesign, I incorporated universally recognizable icons. Even without colorblindness, I already prefer the form with icons over the background colors.

Solving for the User

UI Form Default

This form is much more desirable for users who can see red and green, but colorblind users will still be able to see the difference between passing, warning, and failing statuses.

Conclusion

Colorblindness occurs in 8.5% of men and 0.5% of women. While the amount of color blindness varies, some websites have unusable functionality for certain users. Switching from color to icon-based feedback is a simple solution to making a website usable for these users.


Next Steps

Review our case studies and engagements where we helped companies just like yours solve a variety of business needs.


About Oakwood

Since 1981, Oakwood has been helping companies of all sizes, across all industries, solve their business problems.  We bring world-class consultants to architect, design and deploy technology solutions to move your company forward.   Our proven approach guarantees better business outcomes.  With flexible engagement options, your project is delivered on-time and on budget.  11,000 satisfied clients can’t be wrong.

Like what you've read? Please spread the word!

Leave a Reply

Your email address will not be published. Required fields are marked *