Audience:
It is important to note that colorblind people can still see color. The colors just blend making it harder to differentiate them. Some cases are more severe than others but the majority of people are red/green colorblind. People who are red/green colorblind “generally have difficulty distinguishing between reds, greens, browns and oranges. They also commonly confuse different types of blue and purple hues” (“Types of Colour Blindness”) according to Colourblindawarness.org. This can make things problematic as websites try to be creative with the color scheme and layout but it can cause major problems for colorblind people. UX Collective states that “Statistically speaking most people with a moderate form of red/green color blindness will only be able to identify accurately 5 or so colored pencils from a standard box of 24 pencil crayons” (Tuchkov). Colorblind people can struggle navigating sites because of the wide range of colors and the failure of sites to differentiate links, error messages, and titles from normal information. The lack of accommodation for their condition can cause lots of frustration when trying to find information on a site efficiently.
Do’s:
Some things to help colorblind people navigate a specific website include using text labels for things with color. If a picture features a girl in a yellow dress then the label could explain that to help the viewer understand and not feel left out. Another thing to do is to use thicker lines. This allows the site to be separated into sections for the viewer. The use of colors and symbols together will allow colorblind people to understand what they mean. Red usually means something is wrong in a box or with the site but adding an exclamation point or the word “stop” will help colorblind users to know that something is wrong. Patterns and textures are also an effective method for accommodating colorblind users. Graphs, charts, and backgrounds with different patterns and textures are easy to differentiate from one another. Lastly, a tip is to underline links to other articles so these viewers can find it instead of scrolling over every word to see if it leads them to another page. It saves time and keeps mindless scrolling down.
Don’t:
Some things that should be avoided include colors that are problematic like red/green and blue/purple. Another thing that should be avoided is the use of thin lines. It is hard to distinguish and might not be effective in separating sections from one another. Do not use optional fields when asking for information as colorblind people can’t distinguish the color of the required vs. optional fields. Just have boxes for the required information so they know what is needed without any confusion. Another aspect to avoid color-wise is low contrast colors like red/orange and green/yellow. Close color combinations make it especially hard to decipher what color the background of words are in. Lastly, don’t link articles or the next page without adding a symbol or line to it. Viewers will lose their patience if they are looking for a specific link or next page button and can’t find it because it blends in with the rest of the site.
Aesthetic:
The aesthetic-usability effect is a component of designing a site to accommodate colorblind users. This effect refers to the user’s tendencies to perceive attractive products as more useable. One site described that “Users are more likely to want to try a visually appealing site, and they’re more patient with minor issues” (The Aesthetic-Usability Effect). For colorblind people, the use of symbols, thick lines, and quality color combinations help them perceive the site better because they can use it and it makes sense to them. If they instantly can navigate and understand the site they are more likely to put up with some issues since it is aesthetically pleasing to them. Another component of the aesthetic when designing for colorblind people is to make clickable links recognizable. An article that focused on this stated that designers need to “test [their] color choice for hyperlinks to make sure that people who have colorblindness can spot them easily” (Beyond Blue Links). The site also explains how the site needs to make clickable text universal throughout the site so colorblind viewers can easily recognize it. Whether it be the design around it, underline, or symbol next to it, it needs to be consistent around the site so people know where to click when they want more information or want to change pages.
References
Tuchkov, Ivan. “Color Blindness: How to Design an Accessible User Interface.” Medium, UX Collective, 1 Mar. 2019, uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858.
“Types of Colour Blindness.” Colour Blind Awareness, www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/.
World Leaders in Research-Based User Experience. “The Aesthetic-Usability Effect.” Nielsen Norman Group, www.nngroup.com/articles/aesthetic-usability-effect/.
World Leaders in Research-Based User Experience. “Beyond Blue Links: Making Clickable Elements Recognizable.” Nielsen Norman Group, www.nngroup.com/articles/clickable-elements/.