Why You Need to Be Designing UI with Color Blindness in Mind
Color blindness (also known as color deficiency) is the inability for someone to distinguish between certain colors, usually between green and red and sometimes blue. There are two types of cells, rods and cones, that detect light. Rods detect light and dark and are very sensitive to low light levels. Cone cells are what detect colors—red, green and blue. These three cone cells determine how someone perceives color. When one or more of the color cone cells are absent or do not function, color blindness is the result.
There are many types of color blindness resulting from one of these cones being absent. Although very rare, complete color blindness occurs when all three cones are absent. Color blindness can occur from birth but some people can develop it as an adult. Did you know color blindness affects 1 in 12 men and 1 in 200 women? Interestingly enough, a lot of people who are color blind are not even aware of it. Try taking a color blindness test to find out if you experience color differentiation issues.
Color-Blind User Experience
Since color blindness affects how someone perceives color and light, it can have a huge impact on how they see the world around them – especially when viewing online content like websites or apps. This is why designing UI with color deficiency in mind has become more and more common for designers in recent years.
In the design world, color is a powerful tool to convey emotions, set moods, and add presence to a design. It builds brand recognition and allows users to easily differentiate between these different brands – like Coke and Pepsi. Color blindness can affect this greatly as navigation becomes difficult for the viewer, reducing accessibility. Designers need to consider this in their designs by testing in gray scale to ensure as many users can use their site or app effectively.
Below are simulations of what color blind users might see, depending on their disease:
The most common type of color deficiency is red-green where red and green are very similar in color.
So how do you test for this as a designer? Some great ways to test what color blind users might see is to try out some color blindness simulators such as Chrome’s extension, Spectrum or a simulator for images, Colorblindr.
In the example below, we can see that the Microsoft Dynamics website uses a high contrast color palette of white with accents of dark blue and purple. The images are rich with high contrast. Black large text on a white background makes it easier to read for the user.
High contrast designs like this enable users with Deutranopia (red-green color blindness) to still differentiate important information.
In comparison, take a look at the colors used on the Epicor website below. We see a mix of colors that are similar, which might be difficult for color blind users to differentiate. There are numerous links that are gray on gray which doesn’t provide enough contrast. What does this mean if you are color blind? The text gets lost on the images due to the similarity in tones and some areas of the website become muddled and difficult to read.
In summary, when designing or reviewing possible improvements of your current website consider the following design decisions to allow your site to be fully accessible for more users:
- Do not depend on color alone for important information such as buttons, links, or error message (use icons as support)
- Increase the contrast of similar colors
- Use brighter colors and increase the saturation
- Test your sites in gray scale
Following these tips will allow your site to be much more accessible and color blind friendly!
In order to get the most out of your online presence, you need to consider crucial design elements like this. At Rand Group, we have an experienced team of designers ready to evaluate your current website and recommend UI design improvements. Contact Rand Group for a complete marketing audit today.
– Software Delivered as Promised. No Surprises.