With color blindness affecting 1 in 12 men and 1 in 200 women, chances are high that some of your customers aren’t seeing the full range of colors used in website, product, or collateral designs. While at first glance it may simply seem disappointing that they can’t fully appreciate all the aesthetic details, there can be serious implications to color blindness and its relationship with your creations.

Consider this scenario: a user is shopping online and decides to checkout. However, they accidentally skip a required field, so the form cannot be submitted. The site is designed to visually display this error by turning the missing field’s border red; this is fine for a full vision user, but your potential buyer is color blind and cannot see the shift. After a few minutes of frustration, they abandon the sale entirely.

In cases like these, color adds another layer of information for the user; when this is not presented in any other way, color blind users can be excluded. In the right situation, like the one above, this can prevent users from interacting with your business altogether.

About color blindness

Before taking steps to address the problem, it’s important to understand the condition. Color blindness is usually caused by a genetic defect in the X chromosome. When this occurs and there is no healthy X chromosome to compensate, this creates a range of problems within the color-sensing cones in the eye, resulting in impairment. However, color blindness is not solely the result of genetics at birth—it can be acquired later in life through illness, injury, or simply age.

There are more than half a dozen varieties of color blindness, and each one is experienced differently. The ability to differentiate red and green are most commonly affected, followed by distortion of blues and yellows. However, those with the most severe type cannot see color at all, and may experience additional vision problems.

Adjusting your work

Now that you better understand color blindness and its importance, here are a few things designers should do to keep their work accessible to everyone:

1. Avoid color pairings that are consistently difficult for those with color blindness: greens with reds, purples with blues, and light greens with yellows. (Tip: pay close attention to green and red. As noted, these are very commonly affected colors, and also the ones most frequently used to represent go/yes/success and stop/no/fail.)
2. Choose color combinations that are high contrast. This way, even if the colors themselves are problematic, the darker tone will still be more visible against the lighter one.
3. Never rely solely on color to provide important information. In the example above, adding an icon to mark the missing fields in addition to the red outline would give users another way to spot the problem.
4. Check your work with a simulator to see for yourself what color blind users experience. Some programs, like Adobe Photoshop and Adobe Illustrator, have this option built in (simply click View, Proof Setup, then select one of the color blindness options). Otherwise, you can use this free service to upload your work and test different varieties of color blindness.