The main accessibility consideration when using color is color blindness. Color blindness is quite complex because there are different types of color blindness, and it can vary from person to person. However, its detailed understanding is not essential to be able to create content that is accessible to the color-blind people. The key point to know is that color-blind people cannot differentiate between certain color combinations, because they perceive colors differently. The recommendation for Web design is that visual information, messages, or instructions should not be conveyed via color only. This is achieved by providing information through multiple forms. For example, you can:
- Provide text explanation, such as “red dots on white background.” Note, however, that using the technique of displaying text explanation on cursor hovering over an item will not work on a touch-screen device. Also, you should use actual color names rather than aliases, wherever possible. For example, purple should be used instead of grape, as not all grapes are purple. Incidentally, the technique of providing text explanation also benefits blind users, since screen readers can read out the text.
- Annotate color use to provide more information. For example, apply labels that show category name and, possibly, values or percentages. Such labels can be inside or outside the relevant elements.
- Use different text styles for different colors (e.g., italic, bold, underline), if possible and they are compatible with overall design goal.
- Use shades of the same color, since color-blind people can differentiate between lightness.
- Use texture, pattern, shape, size, or data table in addition to color, where possible, to make information more accessible to color-blind people. Typical candidates are pie and bar charts, as well as maps. The illustration in Figure 9.20, for example, uses different patterns. A data table should provide exactly the same information and in the same order.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.