Use of Color

Focusing on color accessibility is important because folks who are blind will not see the color, and those who are low-vision or colorblind may not be able to read the text if there is not enough contrast.

Main Considerations

There are two main concepts to consider with the use of color; sufficient contrast and conveying information.

• Contrast. “Contrast” refers to visual difference between colors, or how easy colors are to tell apart. Black and white are the colors with the highest possible contrast with each other. Text with low contrast against the background can be very difficult to read, and adjacent visual elements with low contrast between them can be difficult to distinguish. This may impact users' ability to understand the information conveyed by the graphic.
• Conveying Information. Don't rely on color alone to convey the meaning of content. Individuals who are blind, low-vision, or colorblind will not be able to differentiate between the content you are trying to emphasize or highlight. Some examples of where using color only can affect accessibility include; required fields in forms, identifying that items of a certain color are key concepts to learn, using a pie chart with color but not identifying the sections in another way, and using colored regions in a map to code importance or severity. Screen readers do not “see” or convey color information to users.

Examples

Using the same sentence and default background color but only changing the text color, the first example does not have enough contrast to meet accessibility requirements and would be very hard for most to read, the second example does not have enough contrast but is closer to the accessibility standard and may appear readable to many, whereas, the third example does meet all contrast requirements to be accessible and has much more contrast than the second example.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.