Worldwide, 1 in 12 males and 1 in 200 females are affected by color blindness or color vision loss (CVD). This means that for every 100 web or app users, at least 8 people actually experience something very different from what you expect. How do you ensure that your design is attractive enough for these users as well? We will suggest some ways to help you in this article. Instead of rushing to your design team in a panic, let's take a look at a few of the important things we've listed about color usability design.
<h2>First of all, what exactly is color blindness? </h2>
Most color blind people can see things as clearly as normal people, except that they can't recognize the red, green, or blue spectrum. This defect is the result of an X chromosome mutation (meaning that women are more likely to be carriers than patients) and present in three main ways.
The most common is red/green blindness, and these patients confuse all colors that contain red or green parts. Red blindness is not sensitive to the red spectrum. Green blindness has the same problem with green. For example, a person with red blindness will confuse blue and purple because they cannot recognize the red part of purple. Blue blindness, as a third color vision loss, occurs least. They cannot identify the blue or yellow spectrum.
The image below shows what a rainbow might look like in all kinds of color-blind eyes.
<h2>So, how can you improve color usability? </h2>
You might be thinking, "Why would I bother designing for such a small group of users?" "In general, good design elements that colorblind patients find desirable are often good designs in a wider range of areas. So, if your website is well-designed, it should be available to all users.
Usability design doesn't mean you need to compromise on the overall aesthetics of the design. For a user-friendly user experience for colorblind users, you should pay attention to the following five points:
<h3>1. Use both colors and symbols</h3>
You can't rely on color alone to convey information. For example, some types of colorblind users may have difficulty or even see the common red error notification. One solution is to use both color and symbols when the user's attention is needed. Facebook's form filling and corresponding error notification are a good example.
Fun fact: Facebook's logo and less flattering blue color scheme were chosen on purpose. Because Mark Zuckerberg is red-green and illiterate, his recognition of blue is the best.
<h3>2. Use as few colors as possible</h3>
You should limit the colors used by your website. The fewer colors in the design, the less confusion there is to use. Minimalist design is not only a timeless aesthetic trend, but also works for color usability design.
<h3>3. Use styles and textures to show contrast</h3>
Instead of using multiple colors, try using different textures for the elements you need to emphasize. For example, a colorblind user may have difficulty interpreting the chart on the left. In this case, it is best to use a contrasting texture. If possible, try to add a text description.
<h3>4. Take into account color contrast and tone contrast</h3>
Instead of just using black and white as the only contrasting colors, you should try to use a series of clear color contrasts and tonal contrasts in your design. For example, the color blocks in a Word Feud game use four colors that can be easily recognized regardless of whether the user has missing color vision.
<h3>5. Avoid bad color combinations</h3>
When picking color combinations, you have to be smarter. Because different color blindness affects people differently. It's hard to determine which colors are "safe" in web design. Either way, avoid using the following color combinations, as they are bound to be a nightmare for colorblind users:
Green and red
Green and brown
Blue and purple
Green and blue
Bright green and yellow
Blue and grey
Green and gray
Green and black
Note: How do you know you're colorblind?
Well... Some people don't know they're colorblind for years. Because unless someone else points it out, the impact of color blindness on life may be too slight to be noticed. The image below is generally used to test for color blindness. Give it a try! (At the bottom of the article you can find a link to the full test.) )
If you're not sure yet...
Ishihara's color blindness test
Color blindness examination
Coblis (color blindness simulator)
3 mobile apps
<h2>conclusion</h2>
In general, websites created by user experience designers should be accessible to all users. Unfortunately, there is no one-size-fits-all solution designed for colorblind users. We can help keeping some of the necessary UX design principles in mind:
Don't just rely on color to convey information
Limit colors to 2 or 3
Use styles and textures to differentiate
Take into account color contrast and tone contrast
Avoid bad color combinations
Original Author Team: Usabilla
Translator: Old Boy
Translation address: WeChat public number [Hujiang UED]