How the Color Blindness Work – UX Research

About one in every 12 men, and one in 200 women are affected by color blindness globally. As a UX designer you would want to make sure that your webpage or the UI has a color scheme considers individuals with colorblindness as well. Else, they may end up viewing certain text or images in a blurred state, which may get in the way of your desired design output. Let's take a look at how you can go about making your UX more colorblind-friendly.

How colorblindness affects color perception

There are different types of colorblindness that modify the perceived colors differently from how an individual without colorblindness would see it.

  • Deuteranopia results in no green cones.
  • Deuteranomaly causes individuals to observe green, yellow, orange and red in colors that lean more toward red in the color spectrum.
  • Protanomaly results in low red cones.
  • Protanopia results in no red cones, making yellow, red and orange appear dim.

How to make your color scheme in UX design colorblind-friendly

How the Color Blindness Work – UX Research

Designing and testing your UX design to see of it is colorblind-friendly is an essential step in the design process. If you already have a color scheme running, it may help to proof your current color scheme in the UX design to see if it may need any minor tweaks so it is balanced for all-vision types. Here are some tips that you can use to realize the same.

  • It may be difficult to find a colorblind to test your design each time as a part of the evaluation. Thankfully, there are many tools online for websites and applications that you can use to run your UX design and see if it may cause issues for a colorblind person. Use tools like Vischeck to observe simulated versions of how your design would appear to a colorblind person. Vischeck can be used to check the view-ability of documents for colorblind individuals by either uploading it online, running it on the web page or carrying out a local test by means of a Photoshop plug-in.
  • Make sure you have verbiage that goes with the color so there are no discrepancies in the message that you are trying to convey and how it is perceived. For instance, if you have arrowheads in red and green that symbolize Quit and Next respectively, make sure you have the verbiage to back it, so there are no discrepancies in the user's perception.
  • It may sound like a no-brainer, but stick to a color scheme that has colors which can be identified clearly by people with and without colorblindness. For instance individuals with protanopia usually notice green and red hues to be more dim. The problem usually surfaces when the UI backdrop is dark, as opposed to a white backdrop. It is seen that different colors with different saturation are easier to view when you increase the brightness contrast between them, so it should help avoid images or text from appearing blurred or dim.