We all see the world from various perspectives. Some of us may agree with others about things that we see while other people will differ on their viewpoint. The concept of colorblindness creates an entirely different view of the world. Colorblindness and web design is something that many of us probably do not consider. So, what exactly does that mean when you are designing a website? Let’s examine some facts about usability considering color blindness web design.
Color blindness
Approximately 1 of 12 men and 1 of 200 women are colorblind according to the We Are Colorblind organization. Without digging deeply into the scientific aspects, colorblindness is a defect in persons’ retinas that reduces the colors that they see. The three main types of colorblindness reduce viewing of green, red, or blue colors. In other words, if you have a green sight deficiency, you cannot see green completely. What I mean by this is that if you were looking at something that is turquoise and you have a green deficiency in your site you are more likely to see the item as blue or some shade of brown or gray.
Web design
Keeping in mind that your visitors may have color sight deficiencies you should consider how to visually provide images that will not be impacted by the color. Perhaps one of the most common examples would be a line graph where each of the data lines is a distinct color. One line maybe green while a second line is blue. The third line might be red with a fourth line being brown. If someone has a green deficiency, then the brown color will likely take on shades of a blue-red combination or gray-black. A blue deficiency in sight would mean that the brown takes on different shading because of a lack of blue in the color combination. So if you rely entirely on the color scheme to distinguish various points, it is possible that visitors may not be able to recognize what you are explaining.
Let us make this a little more realistic by considering the stoplights that we use within the United States. We know that red is on the top, the second color down will be yellow, while the bottom color down will be green. The top color red means stop. The second color yellow means caution and to slow down or prepare to stop. While the green refers to the driver that it is okay to travel. However, someone with colorblindness may not be able to distinguish the red or green colors. Because of the set order of the colors, the person knows that the lit circle is telling her or him what traffic control to maintain.
Different perspectives
Color is an essential part of web design. We do not need to create monochrome websites. However, we do need to take into consideration the role that color has in our plan and in the information we present. Let’s considered the line graph that I mentioned previously. You can still display the line graph in the various colors. To support those that might have color blindness it is better to include texture for the multiple colors. What that means is the red line may be made of dots. Another track, yellow, might be portrayed by vertical lines of yellow. A blueline could be presented as diagonal lines leaning to the right. Including the simple design elements allows you to have color but also equips you to share your information with someone that is not able to clearly distinguish some colors.
Helpful tools
Colororacle.org has an application that you may download for free. Once installed the Color Oracle applies a filter to your screen enabling you to view what you were designing as if you had a color deficiency. The application is made for Mac, Linux, and Windows. The site also has some design tips as well as a page of useful links.
Trello is an online application that is often used for project management or task management. The Trello company has incorporated a color blind friendly mode which will still use colors but will add the textures we discussed previously; horizontal lines, vertical lines, diagonal lines, wavy lines.
We Are Colorblind organization has a page of examples that are worth checking out.
Color blindness web design
The next time that you are creating information to post on your website, or you are working on a site design project you can keep in mind the impact color has for some of your visitors. When you have this in mind as you are creating your information you are better able to incorporate the needed elements more naturally than if you had to return and make changes after-the-fact. Something simple, such as using texture, can make a big difference in how your visitors gain information from your content and your site. There are many resources that you can find and use. Perhaps the most well-known resource is the W3C. The group works diligently to make technology and its various forms usable and accessible for everyone.
Trello color blindness mode sample
Article: How do the colorblind think and talk about color?
Photo adapted from Sarah Pflug from Burst
#webwithgrits #smallbusiness #colorblindwebdesign