Color Guidelines for Digital Accessibility

Always convey information in a way that does not rely solely on color . For instance, stating in a form that, "required fields are in red" poses a problem to screen reader and color blind users. They will not be able to see which fields are required. Adding an asterisk to those same form fields and updating the notation to read, "required fields have an asterisk" helps not only screen reader and color blind users, but all users. This same rule applies to information within graphs, charts, infographics and other images. For instance, if you were to share the following graph about screen reader software choices, do not use the statement, "NVDA users are listed in blue, JAWS users in orange and VoiceOver users in purple." Instead, convey the information within the text or have an alternative method of conveying the same information, like an accessible data table. 

Another great way to show information in charts and graphs is to use textures or patterns. The graph below shows preferences of different types of fruit. Each fruit has its own patterned line. This helps users with different types of shade color blindness easily differentiate the data. It also helps to add space between the bars in charts and graphs or have the bars outlined in a darker color to separate the data. (example of outlines in the "Designing for Color Blindness" section)

Another good example of why color contrast and design choices matter is color blindness. Color blindness is a spectrum. Red/green color blindness is the most common form of color blindness. In the image below you can see a red and green colored graph where the green equates to 25% and red is 75%. The first graph does not have defining lines between the sections. When the graph is converted to greyscale there is no way to differentiate the sections. The second graph does have defining lines between the sections and when converted to greyscale a user who is colorblind is still able to tell which section is which. Another way to define the data would be use of texture or patterns as mentioned in the "Use of Color" section above. 

A common question that arises around designing with color blindness in mind is, "are there specific colors to avoid?" Without knowing which color blindness you are designing for, it is very hard to avoid specific colors. One assumption would be never use red and green together, but there are proper ways red and green can be used together. There are several resources available that simulate the different types of color blindness, offer "safe" color palettes and share research about designing with color blindness in mind.